/* =============================================================
   Stay With GK — Experience detail pages (shared template)
   Banner uses global .site-banner (base.css).
   Layout: text in LEFT column, photo mosaic in RIGHT column.
   ============================================================= */
:root{ --clay:#C0714E; --clay-deep:#9c5638; }

/* two-column body */
.exp-body{padding:clamp(3rem,6vw,5rem) 0}
.exp-body__grid{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(max-width:900px){.exp-body__grid{grid-template-columns:1fr;gap:2rem}}

/* left column copy */
.exp-copy h2{font-family:var(--display);font-weight:400;color:var(--ink);font-size:clamp(1.7rem,1.3rem+1.6vw,2.4rem);line-height:1.08;margin:2rem 0 .8rem}
.exp-copy h2:first-child,.exp-copy >:first-child{margin-top:0}
.exp-copy p{color:var(--slate);margin:0 0 1rem;max-width:54ch}
.exp-copy .lead{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,1rem+.7vw,1.45rem);line-height:1.45;color:var(--ink)}
.exp-copy ul{list-style:none;margin:.4rem 0 1.4rem;padding:0}
.exp-copy ul li{position:relative;padding-left:1.5rem;margin-bottom:.55rem;color:var(--slate)}
.exp-copy ul li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--brass)}
.exp-pkg{margin:1.6rem 0;padding:1.2rem 1.4rem;background:var(--bone-deep);border:1px solid var(--line);border-radius:14px}
.exp-pkg .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);font-weight:600}
.exp-pkg .v{font-family:var(--display);font-size:1.5rem;color:var(--ink);margin-top:.2rem}

/* right column mosaic — uses ALL photos */
.exp-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;position:sticky;top:96px}
.exp-mosaic figure{margin:0;border-radius:14px;overflow:hidden}
.exp-mosaic img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;transition:transform .5s ease}
.exp-mosaic figure:hover img{transform:scale(1.05)}
.exp-mosaic .span2{grid-column:span 2}
.exp-mosaic .span2 img{aspect-ratio:16/9}
.exp-mosaic .tall img{aspect-ratio:3/4}
@media(max-width:900px){.exp-mosaic{position:static}}
@media(max-width:480px){.exp-mosaic{grid-template-columns:1fr}.exp-mosaic .span2{grid-column:span 1}}

/* included services band */
.exp-services{padding:clamp(3rem,6vw,5rem) 0;background:var(--bone-deep)}
.exp-services__head{max-width:54ch;margin-bottom:2.4rem}
.exp-services__head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,1.4rem+2vw,2.8rem);color:var(--ink);margin:.6rem 0 .5rem}
.exp-services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.exp-svc{background:var(--white,#fff);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.exp-svc__img{aspect-ratio:3/2;overflow:hidden}
.exp-svc__img img{width:100%;height:100%;object-fit:cover;display:block}
.exp-svc__body{padding:1rem 1.1rem 1.2rem}
.exp-svc h3{font-family:var(--display);font-size:1.2rem;color:var(--ink);margin:0 0 .3rem}
.exp-svc p{font-size:.88rem;color:var(--slate);margin:0}
@media(max-width:820px){.exp-services__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.exp-services__grid{grid-template-columns:1fr}}

/* closing CTA */
.exp-cta{padding:clamp(3.5rem,7vw,6rem) 0;text-align:center}
.exp-cta h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,1.4rem+2vw,2.8rem);color:var(--ink);max-width:22ch;margin:0 auto .8rem}
.exp-cta p{max-width:46ch;margin:0 auto 2rem;color:var(--slate)}
.exp-btn{position:relative;display:inline-flex;align-items:center;gap:.8rem;font-weight:600;font-size:1.05rem;padding:1.1rem 2.1rem;border-radius:999px;text-decoration:none;background:linear-gradient(120deg,var(--clay),var(--clay-deep));color:#fff;box-shadow:0 14px 30px -12px rgba(192,113,78,.7);transition:transform .25s}
.exp-btn:hover{transform:translateY(-2px)}

/* =============================================================
   Experiences HUB — large featured cards
   ============================================================= */
.exp-hub-intro{padding:clamp(3rem,6vw,4.5rem) 0 clamp(1rem,2vw,2rem);text-align:center}
.exp-hub-intro h2{font-family:var(--display);font-weight:400;color:var(--ink);font-size:clamp(1.8rem,1.3rem+1.8vw,2.6rem);margin:.6rem 0 .6rem}
.exp-hub-intro p{max-width:60ch;margin:0 auto;color:var(--slate);font-size:1.05rem}
.exp-hub{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(4rem,8vw,7rem)}
.exp-hub__list{display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2.6rem)}
.exp-feature{display:grid;grid-template-columns:1.25fr 1fr;min-height:clamp(320px,42vw,440px);border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--white,#fff);box-shadow:0 24px 60px -40px rgba(35,32,26,.4);text-decoration:none}
.exp-feature:nth-child(even){grid-template-columns:1fr 1.25fr}
.exp-feature:nth-child(even) .exp-feature__media{order:2}
.exp-feature__media{position:relative;overflow:hidden}
.exp-feature__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.exp-feature:hover .exp-feature__media img{transform:scale(1.05)}
.exp-feature__body{padding:clamp(1.8rem,3.5vw,3rem);display:flex;flex-direction:column;justify-content:center}
.exp-feature__body .eyebrow{color:var(--brass-deep);margin-bottom:.9rem}
.exp-feature__body h3{font-family:var(--display);font-weight:400;color:var(--ink);font-size:clamp(1.7rem,1.3rem+1.5vw,2.5rem);line-height:1.08;margin:0 0 .7rem}
.exp-feature__loc{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:.9rem}
.exp-feature__body p{color:var(--slate);margin:0 0 1.4rem;max-width:46ch}
.exp-feature__cta{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--clay-deep);font-size:.98rem}
.exp-feature__cta svg{transition:transform .3s ease}
.exp-feature:hover .exp-feature__cta svg{transform:translateX(4px)}
@media(max-width:820px){
  .exp-feature,.exp-feature:nth-child(even){grid-template-columns:1fr}
  .exp-feature__media{order:0!important;min-height:240px}
  .exp-feature:nth-child(even) .exp-feature__media{order:0}
}
