/* ==========================================================================
   home.css — home-only sections: the banner hero, the role strip and the
   six tiles. Loaded by index.php after base.css and components.css.
   Image URLs are relative to this file, i.e. ../img/.
   ========================================================================== */

/* ================= HERO ================= */
.hero-band{background:var(--navy)}
.hero{position:relative;max-width:calc(var(--page) - 2*var(--gap));margin:0 auto;background:#F3E9D9 url("../img/banner.jpg") center/cover no-repeat;aspect-ratio:649/347;container-type:inline-size;color:#fff;overflow:hidden}
.hero-copy{display:none}
.hero-band .roles-band{max-width:calc(var(--page) - 2*var(--gap));margin:0 auto;padding:22px 16px 26px}
.hero-copy{position:absolute;left:40%;width:33.5%;top:0;height:100%;text-align:center}
.hero .from{position:absolute;left:0;right:0;top:2.6cqw;font-family:var(--script);font-size:4.4cqw;line-height:1;color:#fff}
.hero h1{position:absolute;left:0;right:0;top:6.2cqw;font-family:var(--serif);font-weight:700;line-height:1;letter-spacing:.02em}
.hero h1 .zero{display:block;font-size:8.2cqw;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero h1 .to{display:block;font-size:2.5cqw;letter-spacing:.35em;padding-left:.35em;color:var(--gold-2);margin:1.2cqw 0 .8cqw;font-weight:600}
.hero h1 .hero-w{display:block;font-size:8.2cqw;color:var(--gold-2);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero .tag{position:absolute;left:-6%;right:-6%;top:26.4cqw;font-size:1.75cqw;line-height:1.45;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.roles{display:flex;justify-content:center;gap:clamp(18px,4vw,64px);align-items:flex-end}
.roles li{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;position:relative;padding:0 8px}
.roles li+li::before{content:"";position:absolute;left:calc(-1*clamp(9px,2vw,32px));top:4px;bottom:4px;width:1px;background:rgba(201,166,82,.55)}
.roles .icon{font-size:34px;color:var(--gold-2)}
.hero-mobile{display:none}
@media (max-width:860px){
  .hero{background-image:url("../img/banner-mobile.jpg");aspect-ratio:1002/794}
  .roles{gap:2px;flex-wrap:wrap}
  .roles li{font-size:.5rem;gap:6px;padding:0 4px;letter-spacing:.06em}.roles .icon{font-size:22px}
  .roles li+li::before{display:none}
}

/* ================= TILES ================= */
/* Each tile is a card: the photo on top, the copy underneath. Cards in a
   row stretch to the tallest, and the buttons sit on a shared baseline. */
.tiles-wrap{background:#fff;padding:clamp(28px,4vw,56px) 0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.tile{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;color:var(--ink);border:1px solid #ECE5D8;border-radius:14px;box-shadow:0 10px 30px -18px rgba(11,27,51,.45);transition:transform .3s,box-shadow .3s}
.tile:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(11,27,51,.5)}
.tile .media{position:relative;background:var(--ivory);overflow:hidden}
.tile.r1 .media{aspect-ratio:341/366}
.tile.r2 .media{aspect-ratio:341/312}
.tile .media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover .media img{transform:scale(1.04)}
.tile .body{flex:1;display:flex;flex-direction:column;gap:12px;padding:20px 22px 24px}
.tile .head{display:flex;align-items:center;gap:12px}
.tile .ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0E2A52;color:var(--gold-2)}
.tile.t-songs .ic{background:#4E2C74}
.tile.t-travels .ic{background:#0F5A6E}
.tile.t-podcasts .ic{background:#0F4A5C}
.tile .ic .icon{font-size:20px;stroke-width:1.5}
/* Belt and braces: an empty badge (no icon inside) never shows a circle. */
.tile .ic:empty{display:none}
.tile h2{font-size:1.15rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.2;color:var(--navy)}
.tile p{font-size:.92rem;line-height:1.6;color:var(--muted)}
.tile ul.list{font-size:.9rem;line-height:1.5;font-weight:600;color:var(--ink);display:grid;gap:6px}
.tile ul.list li{padding-left:16px;position:relative}
.tile ul.list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.tile .facts{font-size:.95rem;font-weight:700;line-height:1.5;color:var(--gold-3)}
.tile .btns{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:10px}
/* Real link buttons sit above the full-tile .link overlay so they keep
   their own destinations. */
.tile .btns a.btn{position:relative;z-index:2}
.tile a.link{position:absolute;inset:0;border-radius:inherit}
.tile a.link:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.tile:hover .btn{filter:brightness(1.07)}
/* Buttons over the bottom of the photo (the Book tile's stores and review).
   They sit above the full-tile .link overlay, on a scrim so they stay
   readable whatever the photo is. */
.tile .media-btns{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:44px 12px 14px;background:linear-gradient(180deg,rgba(11,27,51,0),rgba(11,27,51,.72))}
.tile .media-btns .btn{display:inline-flex;align-items:center;min-height:40px;padding:0 1.15em;font-family:var(--sans);cursor:pointer}
.tile .media-btns button.btn{border:0}
.tile .media-btns .btn:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
/* Two columns pair an r1 with an r2 in one row; give them one photo shape. */
@media (max-width:1000px) and (min-width:641px){.tile.r1 .media,.tile.r2 .media{aspect-ratio:341/340}}
@media (max-width:640px){.tiles{grid-template-columns:1fr;gap:18px}}