/* ================================================================
   Tuesdays — MEDIAPODS page styles (v2)
   Shared tokens/nav/footer/buttons/crumb live in shared.css.

   Revision notes vs v1, per client feedback:
   - removed all numeral markers (pillar watermark, pod indices,
     pillar eyebrow numbers) — this is a website, not a deck
   - removed the filter-pill bar entirely
   - removed the two-column sticky rail; replaced with a small
     unlabelled dot indicator, fixed to the viewport edge
   - pods are now visual tiles (placeholder image + hover/tap
     reveal), not text-only accordion rows
   - pillar intros are alternating image+text blocks
   - close/CTA section uses a pastel purple background with dark
     ink text instead of the shared dark .close component
   ================================================================ */

:root{
  --infinia:#8A6A2E;      --infinia-tint:#F7F1E1;
  --intent:#4C7A5C;       --intent-tint:#EAF2EA;
  --influence:#7A5A94;    --influence-tint:#F1EAF5;
  --cta-purple:#E9DCF1;   --cta-ink:#3A2A4A;
}

/* ---------- HERO ---------- */
.mp-hero{padding-top:clamp(110px,14vw,160px);padding-bottom:clamp(56px,7vw,84px)}
.mp-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.mp-hero h1{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.02em;margin-top:22px;max-width:14ch}
.mp-intro{margin-top:26px;max-width:56ch;font-size:1.1rem;line-height:1.65;color:var(--ink-soft)}
.mp-tagline{position:relative;display:inline-block;margin-top:28px;font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.4rem);font-style:italic;line-height:1.5;max-width:44ch}
.mp-tagline mark{background:none;color:inherit;position:relative;padding:0 .06em}
.mp-tagline mark::after{content:'';position:absolute;left:-.1em;right:-.1em;bottom:.06em;height:.42em;background:var(--accent-tint);z-index:-1;transform:rotate(-.6deg)}

.mp-hero-visual{position:relative;height:clamp(260px,28vw,360px)}
.mp-blob{position:absolute;border-radius:50%}
.mp-blob.b1{width:46%;height:64%;background:var(--infinia-tint);top:0;left:16%}
.mp-blob.b2{width:38%;height:50%;background:var(--intent-tint);bottom:4%;left:0}
.mp-blob.b3{width:34%;height:44%;background:var(--influence-tint);top:14%;right:0}
.mp-hero-card{position:absolute;width:46%;aspect-ratio:4/3;background:#fff;border:1px solid var(--line);border-radius:18px;top:28%;left:30%;display:flex;align-items:center;justify-content:center}
.mp-hero-card svg{width:15%;min-width:34px;stroke:var(--ink-faint);stroke-width:1.3;fill:none}

@media(max-width:760px){
  .mp-hero-grid{grid-template-columns:1fr}
  .mp-hero-visual{margin-top:36px;height:260px}
}

/* ---------- PILLARS ---------- */

.mp-pillars{display:flex;flex-direction:column;gap:40px;padding-top:8px}

.pillar{border-radius:32px;padding:clamp(32px,5vw,56px);transition:opacity .5s var(--ease)}

.pillar[data-pillar="infinia"]{background:var(--infinia-tint)}
.pillar[data-pillar="intent"]{background:var(--intent-tint)}
.pillar[data-pillar="influence"]{background:var(--influence-tint)}

.pillar-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:44px}
.pillar-top.is-reverse .pillar-img{order:2}
.pillar-img{aspect-ratio:4/3;border-radius:22px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center}
.pillar-img svg{width:15%;min-width:44px;stroke-width:1.3;fill:none}
.pillar-img{overflow:hidden}               /* add to the existing .pillar-img rule */
.pillar-img img, .tile-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pillar[data-pillar="infinia"] .pillar-img svg{stroke:var(--infinia)}
.pillar[data-pillar="intent"] .pillar-img svg{stroke:var(--intent)}
.pillar[data-pillar="influence"] .pillar-img svg{stroke:var(--influence)}

.pillar-text h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.5rem);letter-spacing:-.01em}
.pillar-text p{margin-top:14px;max-width:42ch;font-size:1.02rem;line-height:1.6;color:var(--ink-soft)}
.pillar-text p.is-pending{font-style:italic;color:var(--ink-faint)}
.pillar-text p.is-pending .flag{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px;border:1px dashed var(--ink-faint);font-style:normal;vertical-align:middle}

@media(max-width:760px){
  .pillar-top{grid-template-columns:1fr}
  .pillar-top.is-reverse .pillar-img{order:0}
}

/* ---------- POD SHELF (visual tiles) ---------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}

.tile{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/3.6;background:rgba(255,255,255,.6);cursor:pointer;outline:none}
.tile:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}

.tile-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease)}
.tile-img svg{width:26%;min-width:38px;stroke-width:1.3;fill:none}
.pillar[data-pillar="infinia"] .tile-img svg{stroke:var(--infinia)}
.pillar[data-pillar="intent"] .tile-img svg{stroke:var(--intent)}
.pillar[data-pillar="influence"] .tile-img svg{stroke:var(--influence)}

.tile-label{position:absolute;left:0;right:0;bottom:0;padding:18px;font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--ink);transition:opacity .3s var(--ease)}

.tile-badge{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;z-index:2;transition:background .3s var(--ease),transform .3s var(--ease)}
.tile-badge svg{width:13px;height:13px;stroke:var(--ink);stroke-width:1.8}

.tile-desc{position:absolute;inset:0;background:rgba(22,24,29,.94);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:14px;font-size:.9rem;line-height:1.55;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.tile-desc .arrowlink{color:#fff;pointer-events:auto}
.tile-desc .arrowlink:hover{color:var(--accent-tint)}

.tile:hover .tile-img, .tile:focus-visible .tile-img, .tile.is-open .tile-img{transform:scale(1.06)}
.tile:hover .tile-label, .tile:focus-visible .tile-label, .tile.is-open .tile-label{opacity:0}
.tile:hover .tile-badge, .tile:focus-visible .tile-badge, .tile.is-open .tile-badge{background:#fff;transform:rotate(45deg)}
.tile:hover .tile-desc, .tile:focus-visible .tile-desc, .tile.is-open .tile-desc{opacity:1;transform:translateY(0);pointer-events:auto}

/* pending pod — no interaction, honest placeholder */
.tile.is-pending{cursor:default;background:rgba(255,255,255,.35);border:1px dashed rgba(22,24,29,.25)}
.tile.is-pending .tile-img{opacity:.5}
.tile.is-pending .tile-label{color:var(--ink-faint)}
.tile-tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:100px;border:1px dashed var(--ink-faint);color:var(--ink-faint);background:rgba(255,255,255,.6)}

/* ---------- DOT RAIL (unlabelled scroll indicator) ---------- */
.mp-dotrail{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:40}
.mp-dotrail .dot{all:unset;width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .3s var(--ease),width .3s var(--ease),height .3s var(--ease)}
.mp-dotrail .dot.on{background:var(--accent);width:9px;height:9px}
@media(max-width:760px){.mp-dotrail{display:none}}

/* ---------- CTA (pastel purple, not dark) ---------- */
.mp-cta{background:var(--cta-purple);color:var(--cta-ink)}
.mp-cta .eyebrow{color:var(--accent)}
.mp-cta h2{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin-top:20px;max-width:16ch}
.mp-cta p{margin-top:22px;max-width:46ch;font-size:1.08rem;line-height:1.6;opacity:.82}
.mp-cta .cta-row{margin-top:36px}