/* The Boys Trip Guide — approved luxury editorial Home treatment.
   Visual-only layer. It activates only while the Overview hero exists. */

.screen:has(#secret-hero){
  --home-gold:#d6a84e;
  --home-gold-bright:#f1c96f;
  --home-ivory:#f5efe4;
  --home-muted:#b8b0a5;
  --home-line:rgba(214,168,78,.42);
  --home-line-soft:rgba(214,168,78,.20);
  --home-panel:#111314;
  --home-panel-2:#0b0d0e;
  background:
    radial-gradient(circle at 22% 0%,rgba(214,168,78,.055),transparent 30rem),
    linear-gradient(180deg,#070809 0%,#090a0b 58%,#050607 100%);
}

.screen:has(#secret-hero) .appbar{
  position:sticky;
  top:0;
  z-index:20;
  padding:14px 22px;
  border-bottom:1px solid rgba(214,168,78,.14);
  background:rgba(6,7,8,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.screen:has(#secret-hero) .appbar-inner{max-width:1260px;gap:18px}
.screen:has(#secret-hero) .brand-lockup{gap:14px}
.screen:has(#secret-hero) .brand-mark{
  width:56px;height:56px;border-radius:3px;border-color:rgba(214,168,78,.72);
  box-shadow:0 0 0 1px rgba(214,168,78,.08),inset 0 0 18px rgba(214,168,78,.06);
}
.screen:has(#secret-hero) .brand-copy strong{
  font-family:Inter,ui-sans-serif,sans-serif;font-size:19px;font-weight:800;letter-spacing:.13em;
}
.screen:has(#secret-hero) .brand-copy span{font-size:10px;color:var(--home-gold);letter-spacing:.42em}
.screen:has(#secret-hero) .trip-title strong{font-size:15px;color:var(--home-ivory)}
.screen:has(#secret-hero) .trip-title span{font-size:11px;color:var(--home-gold);letter-spacing:.16em}
.screen:has(#secret-hero) .icon-btn{
  width:48px;height:48px;border-radius:16px;border-color:rgba(214,168,78,.22);
  background:linear-gradient(180deg,#161819,#0d0f10);color:#e7dfd2;
}

.screen:has(#secret-hero) .dashboard{max-width:1260px;padding:18px 24px 124px}
.screen:has(#secret-hero) .hero-card{
  height:356px;border-radius:24px;border-color:var(--home-line);background:#090a0b;
  box-shadow:0 22px 70px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.018);
}
.screen:has(#secret-hero) .hero-card img{object-position:center 34%;filter:saturate(.82) contrast(1.04) brightness(.82)}
.screen:has(#secret-hero) .hero-card:before{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 9% 24%,rgba(214,168,78,.12),transparent 21rem),
    linear-gradient(90deg,rgba(4,5,6,.98) 0%,rgba(4,5,6,.88) 29%,rgba(4,5,6,.38) 49%,rgba(4,5,6,.05) 72%),
    linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.58) 100%);
}
.screen:has(#secret-hero) .hero-card:after{background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.28) 100%)}
.screen:has(#secret-hero) .hero-meta{left:40px;right:32px;bottom:31px;align-items:flex-end}
.screen:has(#secret-hero) .hero-meta>div:first-child{min-width:0;max-width:760px}
.screen:has(#secret-hero) .hero-meta .eyebrow{font-size:12px;letter-spacing:.28em;color:var(--home-gold-bright);margin-bottom:13px}
.screen:has(#secret-hero) .hero-meta h1{
  font-family:Georgia,'Times New Roman',serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(48px,6vw,76px);line-height:.92;letter-spacing:-.045em;color:var(--home-ivory);
  text-shadow:0 4px 28px rgba(0,0,0,.72);
}
.screen:has(#secret-hero) .hero-meta h1 span{color:var(--home-gold-bright)}
.screen:has(#secret-hero) .hero-meta p{
  position:relative;margin:17px 0 0;padding-left:14px;color:#ece4d8;font-size:16px;
}
.screen:has(#secret-hero) .hero-meta p:before{
  content:"";position:absolute;left:0;top:1px;bottom:1px;width:2px;border-radius:2px;background:var(--home-gold-bright);
}
.screen:has(#secret-hero) .trip-stamp{
  min-width:166px;padding:16px 18px 14px;border-radius:19px;border-color:rgba(214,168,78,.58);
  background:linear-gradient(180deg,rgba(20,22,23,.94),rgba(8,9,10,.96));text-align:center;
  box-shadow:0 16px 36px rgba(0,0,0,.34),inset 0 0 22px rgba(214,168,78,.025);
}
.screen:has(#secret-hero) .trip-stamp b{font-size:11px;letter-spacing:.21em;color:var(--home-gold-bright);margin-bottom:8px}
.screen:has(#secret-hero) .trip-stamp span{font-size:14px;line-height:1.75;color:#f0e9de}
.screen:has(#secret-hero) .trip-stamp small{display:block;margin-top:9px;padding-top:8px;border-top:1px solid rgba(214,168,78,.18);color:var(--home-gold);font-size:9px;letter-spacing:.16em;text-transform:uppercase}

.screen:has(#secret-hero) .stat-row{gap:12px;margin:16px 0}
.screen:has(#secret-hero) .stat{
  position:relative;min-height:126px;padding:22px 18px 18px 84px;text-align:left;
  border:1px solid var(--home-line-soft);border-radius:18px;
  background:
    radial-gradient(circle at 12% 32%,rgba(214,168,78,.08),transparent 5rem),
    linear-gradient(145deg,#151718,#0d0f10 76%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 30px rgba(0,0,0,.16);
}
.screen:has(#secret-hero) .stat:before{
  position:absolute;left:18px;top:25px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(214,168,78,.42);color:var(--home-gold-bright);font-size:23px;line-height:1;
  background:radial-gradient(circle at 50% 30%,rgba(214,168,78,.16),rgba(10,11,12,.88) 66%);
  box-shadow:inset 0 0 18px rgba(214,168,78,.06);
}
.screen:has(#secret-hero) .stat:nth-child(1):before{content:"♙"}
.screen:has(#secret-hero) .stat:nth-child(2):before{content:"▤"}
.screen:has(#secret-hero) .stat:nth-child(3):before{content:"£";font-family:Georgia,serif;font-size:20px}
.screen:has(#secret-hero) .stat:nth-child(4):before{content:"▧"}
.screen:has(#secret-hero) .stat b{
  color:var(--home-ivory);font-family:Georgia,'Times New Roman',serif;font-size:34px;font-weight:400;line-height:1;
}
.screen:has(#secret-hero) .stat span{display:block;margin-top:6px;color:#cbc2b6;font-size:10px;letter-spacing:.20em}
.screen:has(#secret-hero) .stat-action{display:block;margin-top:12px;color:var(--home-gold-bright);font-size:11px;line-height:1.25}

.screen:has(#secret-hero) #tab-content>.overview-grid{grid-template-columns:1fr 1fr;gap:14px}
.screen:has(#secret-hero) .overview-card{
  position:relative;min-height:222px;overflow:hidden;padding:28px 30px;border-radius:20px;border-color:var(--home-line-soft);
  background:linear-gradient(145deg,#141617,#0b0d0e 82%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 34px rgba(0,0,0,.16);
}
.screen:has(#secret-hero) .overview-card:before{
  content:"";position:absolute;pointer-events:none;inset:0;opacity:.18;
  background-image:
    radial-gradient(circle at 64% 28%,rgba(214,168,78,.34) 0 1px,transparent 1.3px),
    radial-gradient(circle at 69% 37%,rgba(214,168,78,.26) 0 1px,transparent 1.2px),
    radial-gradient(circle at 74% 46%,rgba(214,168,78,.22) 0 1px,transparent 1.2px);
  background-size:12px 12px,17px 17px,23px 23px;
  mask-image:linear-gradient(90deg,transparent 38%,#000 64%,transparent 100%);
}
.screen:has(#secret-hero) .overview-card:nth-child(2):before{
  inset:18px 22px 18px auto;width:170px;opacity:.10;mask-image:none;background:url('/assets/btg-mark.png?v=1') center/contain no-repeat;
}
.screen:has(#secret-hero) .overview-card>*{position:relative;z-index:1}
.screen:has(#secret-hero) .overview-card .eyebrow{font-size:11px;letter-spacing:.24em;color:var(--home-gold-bright)}
.screen:has(#secret-hero) .overview-card h2{
  margin:18px 0 8px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:34px;line-height:1.08;color:var(--home-ivory);
}
.screen:has(#secret-hero) .overview-card p{color:#c5bdb1;font-size:14px;line-height:1.5}
.screen:has(#secret-hero) .overview-links{display:flex;gap:10px;margin-top:23px}
.screen:has(#secret-hero) .overview-card .ghost{
  min-height:45px;padding:11px 19px;border-radius:11px;border-color:rgba(214,168,78,.36);color:#efe7da;background:rgba(9,10,11,.7);
}
.screen:has(#secret-hero) .overview-card .ghost:first-child{
  background:linear-gradient(180deg,#f1cb78,#d8a64d);border-color:#f2ce7b;color:#15110b;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

.screen:has(#secret-hero) .bottom-note{color:#756f67;font-size:10px;letter-spacing:.09em;text-transform:uppercase;margin-top:24px}
.screen:has(#secret-hero) .bottom-dock{
  border-color:rgba(214,168,78,.36);background:rgba(10,12,13,.96);
  box-shadow:0 18px 50px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.035);
}
.screen:has(#secret-hero) .dock-item{color:#aaa49b}
.screen:has(#secret-hero) .dock-item.active{color:var(--home-gold-bright)}
.screen:has(#secret-hero) .dock-item.active:after{background:var(--home-gold-bright);box-shadow:0 0 10px rgba(241,201,111,.35)}

@media(max-width:700px){
  .screen:has(#secret-hero) .appbar{padding:13px 16px 12px}
  .screen:has(#secret-hero) .appbar-inner{gap:10px}
  .screen:has(#secret-hero) .brand-lockup{gap:10px;min-width:0}
  .screen:has(#secret-hero) .brand-mark{width:52px;height:52px;flex:0 0 52px}
  .screen:has(#secret-hero) .brand-copy strong{font-size:15px;letter-spacing:.12em;white-space:nowrap}
  .screen:has(#secret-hero) .brand-copy span{font-size:8px;letter-spacing:.36em}
  .screen:has(#secret-hero) .trip-title{min-width:0;margin-left:auto}
  .screen:has(#secret-hero) .trip-title strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
  .screen:has(#secret-hero) .trip-title span{font-size:9px;letter-spacing:.12em;white-space:nowrap}
  .screen:has(#secret-hero) .icon-btn{width:44px;height:44px;flex:0 0 44px;border-radius:15px}

  .screen:has(#secret-hero) .dashboard{padding:12px 12px 126px}
  .screen:has(#secret-hero) .hero-card{height:410px;border-radius:21px}
  .screen:has(#secret-hero) .hero-card img{object-position:61% 18%;filter:saturate(.82) contrast(1.04) brightness(.78)}
  .screen:has(#secret-hero) .hero-card:before{
    background:
      linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.06) 35%,rgba(0,0,0,.78) 75%,rgba(0,0,0,.96) 100%),
      linear-gradient(90deg,rgba(3,4,5,.62) 0%,rgba(3,4,5,.17) 60%,rgba(3,4,5,.03) 100%);
  }
  .screen:has(#secret-hero) .hero-meta{left:20px;right:14px;bottom:18px;display:block}
  .screen:has(#secret-hero) .hero-meta>div:first-child{padding-right:115px}
  .screen:has(#secret-hero) .hero-meta .eyebrow{font-size:10px;letter-spacing:.24em;margin-bottom:10px}
  .screen:has(#secret-hero) .hero-meta h1{font-size:clamp(43px,13.1vw,56px);line-height:.92;letter-spacing:-.045em;max-width:280px}
  .screen:has(#secret-hero) .hero-meta p{margin-top:13px;font-size:13px;padding-left:10px}
  .screen:has(#secret-hero) .trip-stamp{
    position:absolute;right:0;bottom:7px;min-width:116px;width:116px;padding:12px 10px 10px;border-radius:16px;
  }
  .screen:has(#secret-hero) .trip-stamp b{font-size:8px;letter-spacing:.15em;margin-bottom:6px}
  .screen:has(#secret-hero) .trip-stamp span{font-size:11px;line-height:1.65}
  .screen:has(#secret-hero) .trip-stamp small{margin-top:7px;padding-top:6px;font-size:7px;letter-spacing:.10em}
  .screen:has(#secret-hero) .hero-edit-btn{top:10px;right:10px;transform:scale(.88);transform-origin:top right}

  .screen:has(#secret-hero) .stat-row{grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
  .screen:has(#secret-hero) .stat{min-height:128px;padding:21px 10px 16px 69px;border-radius:17px}
  .screen:has(#secret-hero) .stat:before{left:13px;top:24px;width:43px;height:43px;font-size:20px}
  .screen:has(#secret-hero) .stat b{font-size:clamp(25px,7vw,31px);white-space:nowrap;letter-spacing:-.035em}
  .screen:has(#secret-hero) .stat:nth-child(3) b{font-size:clamp(21px,5.7vw,27px)}
  .screen:has(#secret-hero) .stat span{margin-top:6px;font-size:9px;letter-spacing:.15em}
  .screen:has(#secret-hero) .stat-action{margin-top:11px;font-size:10px;line-height:1.2}

  .screen:has(#secret-hero) #tab-content>.overview-grid{grid-template-columns:1fr;gap:9px}
  .screen:has(#secret-hero) .overview-card{min-height:190px;padding:23px 21px;border-radius:18px}
  .screen:has(#secret-hero) .overview-card .eyebrow{font-size:9px;letter-spacing:.21em}
  .screen:has(#secret-hero) .overview-card h2{margin:16px 0 7px;font-size:29px}
  .screen:has(#secret-hero) .overview-card p{max-width:80%;font-size:12px;line-height:1.5}
  .screen:has(#secret-hero) .overview-card:nth-child(2):before{width:115px;right:13px;opacity:.08}
  .screen:has(#secret-hero) .overview-links{gap:8px;margin-top:19px;flex-wrap:wrap}
  .screen:has(#secret-hero) .overview-card .ghost{min-height:43px;padding:10px 15px;font-size:12px}

  .screen:has(#secret-hero) .bottom-dock{
    width:min(calc(100% - 22px),430px);padding:8px 8px 7px;border-radius:28px;bottom:max(10px,env(safe-area-inset-bottom));
  }
  .screen:has(#secret-hero) .dock-item{min-height:57px;border-radius:17px}
  .screen:has(#secret-hero) .dock-item>span{font-size:21px}
  .screen:has(#secret-hero) .dock-item small{font-size:8px;letter-spacing:.08em}
  .screen:has(#secret-hero) .dock-primary{transform:none!important;width:auto!important;height:auto!important;min-height:57px!important}
}

@media(max-width:360px){
  .screen:has(#secret-hero) .brand-copy strong{font-size:13px}
  .screen:has(#secret-hero) .brand-mark{width:48px;height:48px;flex-basis:48px}
  .screen:has(#secret-hero) .trip-title strong{max-width:70px}
  .screen:has(#secret-hero) .hero-card{height:392px}
  .screen:has(#secret-hero) .hero-meta h1{font-size:41px}
  .screen:has(#secret-hero) .hero-meta>div:first-child{padding-right:108px}
  .screen:has(#secret-hero) .trip-stamp{width:108px;min-width:108px}
  .screen:has(#secret-hero) .stat{padding-left:62px}
  .screen:has(#secret-hero) .stat:before{left:10px;width:40px;height:40px}
  .screen:has(#secret-hero) .stat b{font-size:24px}
  .screen:has(#secret-hero) .stat:nth-child(3) b{font-size:20px}
}

@media(prefers-reduced-motion:reduce){
  .screen:has(#secret-hero),.screen:has(#secret-hero) *{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}
}