/* ============================================================
   Official X embed — container styles only.
   X injects its own iframe styles inside.
   ============================================================ */

.x-embed-grid{
  display:grid;
  gap:22px;
  grid-template-columns:1fr;
  justify-items:center;
}
@media (min-width:780px){
  .x-embed-grid{ grid-template-columns:1fr 1fr; align-items:start; }
}

.x-embed{
  width:100%;
  max-width:550px;
  min-height:280px;
  display:flex;
  justify-content:center;
}

/* X renders an iframe — keep it inside the container */
.x-embed iframe{
  max-width:100% !important;
  border-radius:14px !important;
  box-shadow:0 12px 30px -20px rgba(35,45,38,.28) !important;
}

/* Loading placeholder — visible until the embed iframe lands */
.x-embed:empty::before,
.x-embed:has(blockquote)::before{
  content:"Loading post from X…";
  display:block;
  padding:40px 20px;
  font-size:13px;
  color:var(--vis-muted, #69776f);
  text-align:center;
  background:#fffefa;
  border:1px dashed var(--vis-line, #dcd8cd);
  border-radius:16px;
  width:100%;
}
.x-embed iframe + * ,
.x-embed:has(iframe)::before{
  display:none;
  content:none;
}

/* Fallback link if X is blocked entirely */
.x-embed .x-embed-fallback{
  display:none;
  width:100%;
  padding:24px;
  background:#fffefa;
  border:1px solid var(--vis-line, #dcd8cd);
  border-radius:16px;
  text-align:center;
  font-size:13.5px;
  color:var(--vis-muted, #69776f);
}
.x-embed .x-embed-fallback a{
  color:var(--vis-green, #174b39);
  font-weight:600;
}

/* Match the site card aesthetic on mobile */
@media (max-width:520px){
  .x-embed{ max-width:100%; }
  
  /* ============================================================
   WIC Event Gallery — masonry-style grid + lightbox
   ============================================================ */

.wic-gallery{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:minmax(180px,auto);
}
@media (min-width:760px){
  .wic-gallery{ grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(200px,auto); }
}

.wic-tile{
  display:block;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#f5efe0;
  cursor:zoom-in;
  border:1px solid var(--vis-line, #dcd8cd);
  transition:transform .25s, box-shadow .25s;
}
.wic-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px -22px rgba(35,45,38,.35);
}
.wic-tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s;
}
.wic-tile:hover img{ transform:scale(1.04); }

.wic-tile__cap{
  position:absolute;
  inset:auto 0 0 0;
  padding:14px 16px;
  background:linear-gradient(to top,rgba(20,36,29,.85),rgba(20,36,29,0));
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.wic-tile:hover .wic-tile__cap{
  opacity:1;
  transform:translateY(0);
}
@media (max-width:640px){
  .wic-tile__cap{
    opacity:1;
    transform:none;
    font-size:12px;
    padding:10px 12px;
  }
}

/* Feature the first two images on larger tiles */
.wic-tile--wide{ grid-column:span 2; }
@media (max-width:759px){ .wic-tile--wide{ grid-column:span 2; } }

/* ============================================================
   Lightbox
   ============================================================ */
.wic-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(15,25,20,.92);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  cursor:zoom-out;
}
.wic-lightbox.is-open{ display:flex; }
.wic-lightbox img{
  max-width:min(92vw,1200px);
  max-height:90vh;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  cursor:default;
}
.wic-lightbox__close{
  position:absolute;
  top:20px;
  right:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  transition:background .15s;
}
.wic-lightbox__close:hover{ background:rgba(255,255,255,.25); }
body.wic-lightbox-open{ overflow:hidden; }
}