/* Wall of Love. Embeds the live Senja wall and crops Senja's own banner off the top (see "Senja embed" below). */

/* Hero: the Senja wall's title and subtitle, with a heart built from members' photos.
   The headline's size comes from squad-pages.css down to 761px; only the phone size differs (760px rule below). */
.wol-hero{--hero:var(--orange);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;column-gap:clamp(32px,5vw,96px)}
.wol-hero h1{max-width:none}
.wol-hero .sp-hero-lede{color:var(--ink);font-size:clamp(19px,1.5vw,24px)}
.wol-heart{--d:15.6%;position:relative;width:100%;max-width:540px;aspect-ratio:1;justify-self:end;animation:wol-beat 1.2s ease-in-out 2.2s 1}
.wol-heart>*{position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--orange);animation:wol-pop .9s var(--ease) both;animation-delay:calc(.2s + var(--i) * 22ms)}
.wol-heart img{max-width:none;object-fit:cover;background:#f2a576}
.wol-dot--yellow{background:var(--yellow)}
.wol-dot--violet{background:var(--violet)}
.wol-dot--red{background:var(--red)}
.wol-dot--ink{background:var(--ink)}
.wol-dot--paper{background:var(--paper)}
@keyframes wol-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
@keyframes wol-beat{0%,40%,100%{transform:scale(1)}14%{transform:scale(1.045)}28%{transform:scale(1.01)}36%{transform:scale(1.03)}}

/* Senja embed. Senja draws its own gradient banner ("Angel Squad Wall of Love") above the cards, and the page
   hero already says that, so the frame hides the banner by pulling the iframe up inside an overflow:hidden box.
   The banner's height depends only on the iframe's width (measured October 2026 on senja.io):
     768px and wider: 340px   478-767px: 322px   469-477px: 350px   286-468px: 404px   narrower: 432px
   Each crop below is that height plus 8px, which lands inside the 16px gap above Senja's first row of cards.
   The 469-477px and sub-286px bands depend on where Senja's title and subtitle wrap, so the layout keeps the
   iframe out of 455-495px and never narrower than 320px. If you change the wall's title or subtitle in Senja,
   or Senja redesigns its header, re-measure these values (or delete the @container rules to show the banner).
   At the bottom, Senja's page ends with a 48px strip of its red page background at every width (its card area
   is shifted up 48px), so the frame trims that too.
   The panel runs gutter to gutter like the rest of the page, up to 1320px, and is centred
   beyond that; from about 1150px wide Senja centres a fixed three-column grid (3 x 360px) inside it, on a background
   that matches the panel's.
   The crop only switches on once iframeResizer has sized the frame (wall-of-love.js adds .is-sized). */
.wol-embed-section{padding:clamp(48px,6vw,96px) var(--gutter) clamp(65px,7vw,100px)}
.wol-frame{max-width:1320px;margin-inline:auto;padding-top:12px;border:1px solid #1e1b1a24;border-radius:22px;background:#f5f5f4;overflow:hidden}
.wol-embed{container:wol-embed/inline-size;position:relative;overflow:hidden;min-height:min(880px,92vh)}
.wol-embed.is-sized,.wol-embed.is-stalled{min-height:0}
.wol-embed iframe{display:block;width:100%;border:0;opacity:0;transition:opacity .7s var(--ease)}
.wol-embed.is-sized iframe,.wol-embed.is-stalled iframe{opacity:1}
.wol-embed.is-sized iframe{margin-bottom:-48px}
@container wol-embed (width >= 768px){.is-sized iframe{margin-top:-348px}}
@container wol-embed (478px <= width < 768px){.is-sized iframe{margin-top:-330px}}
@container wol-embed (469px <= width < 478px){.is-sized iframe{margin-top:-358px}}
@container wol-embed (286px <= width < 469px){.is-sized iframe{margin-top:-412px}}
@container wol-embed (width < 286px){.is-sized iframe{margin-top:-440px}}
/* Placeholder cards while Senja loads. */
.wol-skeleton{position:absolute;inset:8px 24px auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;pointer-events:none}
.wol-skeleton span{height:300px;border-radius:8px;background:#fff;box-shadow:0 10px 15px -3px #00000012;animation:wol-pulse 1.6s ease-in-out infinite alternate}
.wol-skeleton span:nth-child(2){height:220px;animation-delay:.2s}
.wol-skeleton span:nth-child(3){height:260px;animation-delay:.4s}
.wol-skeleton span:nth-child(4){height:240px;animation-delay:.3s}
.wol-skeleton span:nth-child(5){height:320px;animation-delay:.5s}
.wol-skeleton span:nth-child(6){height:200px;animation-delay:.6s}
.is-sized .wol-skeleton,.is-stalled .wol-skeleton{display:none}
@keyframes wol-pulse{to{opacity:.45}}

/* Press: "Read more about Angel Squad featured in", on ink. */
.wol-press{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:40px clamp(40px,7vw,140px);padding:clamp(65px,7vw,100px) var(--gutter)}
.wol-press .sp-h2{max-width:8.5em;font-size:clamp(44px,5vw,88px)}
.wol-press-list{display:grid;gap:16px}
.wol-press-card{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:clamp(112px,9.5vw,148px);padding:24px clamp(24px,3vw,44px);border:1px solid #ffffff2e;border-radius:16px;color:var(--paper);transition:transform .4s var(--ease),border-color .3s,background .3s}
.wol-press-card img{width:auto;height:clamp(26px,2.4vw,36px);max-width:72%;object-fit:contain;filter:brightness(0) invert(1)}
.wol-press-card img[src$="nytimes.svg"]{height:clamp(28px,2.6vw,40px)}
.wol-press-arrow{display:grid;place-items:center;flex:none;width:54px;height:54px;border:1px solid #ffffff4d;border-radius:50%;color:var(--yellow);font-size:22px;transition:background .3s,color .3s,border-color .3s}
.wol-press-arrow .ui-arrow{transition:transform .4s var(--ease)}
/* Pointer devices only, so the lift doesn't stick after a tap on a touch screen. The lift's selector has to
   outrank style.css's ".js .reveal.is-visible{transform:translateY(0)}", which would otherwise cancel it. */
@media (hover:hover){
  .wol-press-list .wol-press-card:hover{transform:translateY(-3px);border-color:#ffffff73;background:#ffffff0d}
  .wol-press-card:hover .wol-press-arrow{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
  .wol-press-card:hover .wol-press-arrow .ui-arrow{transform:translate(2px,-2px)}
}
.wol-press-card:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.wol-press .reveal:nth-child(2){transition-delay:.09s}
.wol-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:1100px){
  /* The headline keeps most of the row as it eases down to 84px at 900px. */
  .wol-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .wol-heart{max-width:420px}
  .wol-skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* A smaller heart so the headline can stay at about 80px beside it; the lede breaks after "Angel Squad". */
  .wol-hero{grid-template-columns:minmax(0,1fr) auto}
  .wol-hero .sp-hero-lede{max-width:15em}
  .wol-heart{width:min(290px,32vw)}
  .wol-press{grid-template-columns:1fr;align-items:start}
  /* Smaller once stacked, with "featured in" kept together. */
  .wol-press .sp-h2{font-size:clamp(36px,10.5vw,56px)}
  .wol-press .sp-h2 .serif-word{white-space:nowrap}
}
@media (max-width:760px){
  /* Headline across the top; lede and heart side by side under it, then stacked on phones. */
  .wol-hero{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title title" "lede heart";align-items:start}
  .wol-hero-copy{display:contents}
  .wol-hero h1{grid-area:title;font-size:clamp(48px,14vw,84px)}
  .wol-hero .sp-hero-lede{grid-area:lede;font-size:18px}
  .wol-heart{grid-area:heart;width:min(290px,40vw);justify-self:end;margin-top:30px}
  /* Full-bleed on phones so the iframe is the whole screen width (never in Senja's ambiguous widths). */
  .wol-embed-section{padding-left:0;padding-right:0;padding-top:0}
  .wol-frame{border-width:0 0 1px;border-radius:0;padding-top:16px}
  .wol-skeleton{grid-template-columns:1fr;inset-inline:16px}
  .wol-skeleton span:nth-child(n+3){display:none}
  .wol-press-card{min-height:96px;padding:20px 22px}
  .wol-press-arrow{width:46px;height:46px;font-size:19px}
  .wol-press .reveal:nth-child(2){transition-delay:0s}
}
/* Between 455px and 495px Senja's subtitle may or may not wrap, so hold the iframe at 450px there. The panel
   stays full-bleed; its background matches Senja's, so the narrower iframe doesn't show. */
@media (min-width:455px) and (max-width:495px){
  .wol-embed{max-width:450px;margin-inline:auto}
}
@media (max-width:560px){
  .wol-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "lede" "heart"}
  .wol-heart{width:min(280px,76vw);justify-self:start;margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
  .wol-heart,.wol-heart>*{animation:none}
  .wol-skeleton span{animation:none}
}