/* ==========================================================================
   facebook.css, live "Latest from Facebook" feed embed + gallery
   ========================================================================== */
.tt-fb{padding:var(--tt-section-y) 0; background:var(--tt-sand);}
.tt-fb__grid{
  display:grid; grid-template-columns:1fr 500px; gap:clamp(28px,4vw,48px);
  max-width:var(--tt-maxw); margin:0 auto; padding-inline:var(--tt-gutter); align-items:stretch;
}

/* Gallery side */
.tt-fb__gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;}
.tt-gallery__item{border-radius:16px; overflow:hidden; aspect-ratio:1/1; box-shadow:0 10px 24px rgba(31,59,82,.12);}
.tt-gallery__item img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.tt-gallery__item:hover img{transform:scale(1.06);}

/* Feed side (flex column so the embed fills the card and matches the gallery height) */
.tt-fb__feed{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:var(--tt-radius); padding:1.2rem;
  box-shadow:0 14px 34px rgba(31,59,82,.1);
}
.tt-fb__feed h3{font-size:1.15rem; color:var(--tt-navy); margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem;}
.tt-fb__embed-wrap{flex:1 1 auto; min-height:520px; border-radius:12px; overflow:hidden; background:#f4f6f8;}

/* The SDK is injected just before the feed scrolls into frame (assets/js/facebook.js),
   so this placeholder holds the space until it renders. Visitors who never scroll this
   far never contact Facebook. */
.tt-fb__loading{
  height:100%; min-height:520px; display:flex; align-items:center; justify-content:center;
  font-size:.92rem; color:var(--tt-stone);
}
.tt-fb__embed-wrap.is-live .tt-fb__loading{display:none;}
/* Facebook SDK renders a .fb-page (span > iframe). Force it to fill the card at
   the container's width so it never clips on the right or leaves a gap. */
.tt-fb__embed-wrap .fb-page,
.tt-fb__embed-wrap .fb-page > span,
.tt-fb__embed-wrap .fb-page iframe{
  width:100% !important; height:100% !important;
}
.tt-fb__fallback{margin-top:1rem; text-align:center;}

@media (max-width:980px){
  .tt-fb__grid{grid-template-columns:1fr;}
  .tt-fb__gallery{max-width:520px; margin-inline:auto;}
  .tt-fb__feed{max-width:500px; margin-inline:auto; width:100%;}
  .tt-fb__embed-wrap{min-height:560px;}
}