/* Homepage styles (page-specific; shared reset/vars/popup live in base.css) */

/* HEADER */
header{background:var(--black);color:var(--cream);padding:22px 40px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;}
.logo{font-family:'Archivo',sans-serif;font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:-0.5px;color:var(--cream);text-decoration:none;}
.logo em{font-style:italic;}
nav{display:flex;align-items:center;}
nav a{color:var(--cream);text-decoration:none;font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:1px;margin-left:28px;line-height:1;}
nav a:hover{color:var(--red);}
nav a.cta{background:var(--red);padding:9px 16px;color:var(--cream);}
nav a.cta:hover{background:#b5182f;color:var(--cream);}

/* HERO */
.hero{position:relative;background:var(--black);min-height:66vh;display:flex;align-items:center;justify-content:center;padding:70px 20px;text-align:center;overflow:hidden;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;}
.hero .hero-content{position:relative;z-index:2;}
.hero h1{font-family:'Anton',sans-serif;color:var(--red);font-size:clamp(44px,6.5vw,92px);line-height:.95;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.55);}
.hero p{color:var(--cream);margin-top:16px;font-size:16px;letter-spacing:.5px;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.65);}
@media(max-width:600px){.hero{min-height:60vh;}}
.chevrons{display:flex;justify-content:center;gap:12px;margin-top:22px;}
a.chevrons{text-decoration:none;cursor:pointer;transition:opacity .15s,transform .15s;}
a.chevrons:hover{opacity:.7;transform:translateY(3px);}

/* TRIP GRID */
.trips{max-width:1240px;margin:0 auto;padding:36px 30px 70px;}
/* Land #trips (and other in-page anchors) below the sticky header, not under it:
   sticky-header height + ~20px breathing room. The header grows as the logo/nav
   wrap on narrower screens (75px → 100px → 128px), so the offset steps up to match. */
#trips,#testimonials,#mailing-list{scroll-margin-top:96px;}
@media(max-width:739px){#trips,#testimonials,#mailing-list{scroll-margin-top:120px;}}
@media(max-width:540px){#trips,#testimonials,#mailing-list{scroll-margin-top:148px;}}
.section-title{display:flex;align-items:baseline;justify-content:space-between;border-bottom:4px solid var(--black);padding-bottom:12px;margin-bottom:26px;}
.section-title h2{font-family:'Anton',sans-serif;font-size:42px;text-transform:uppercase;}
.section-title span{font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:1px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;}

.card{background:var(--black);color:var(--cream);border:3px solid var(--black);display:flex;flex-direction:column;transition:transform .15s;position:relative;}
.card:hover{transform:translateY(-4px);}
.card.clickable{cursor:pointer;}
/* Stretched link: the CTA's ::after covers the whole card so any click on an
   open card follows its link. Markup stays valid; upcoming (Notify Me) cards
   have no .stretched, so their inline form keeps working. */
.stretched::after{content:"";position:absolute;inset:0;z-index:3;}
.card .img{height:190px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
/* Hover / in-view preview video: fades in over the photo, YouTube-style */
.card .img video.card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;transition:opacity .4s ease;pointer-events:none;background:#000;}
.card .img.preview-playing video.card-preview{opacity:1;}
.card .img{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:2px;border-bottom:3px solid var(--red);}
.img.mauritania{background:linear-gradient(135deg,#b76a35,#e0a45e 60%,#7a4520);}
.img.iran{background:linear-gradient(135deg,#2d6a8a,#7fb3c8 55%,#c98f4e);}
.img.spain{background:linear-gradient(135deg,#8a1522,#d92038 55%,#5c0d16);}
.img.afg{background:linear-gradient(135deg,#9db4c0,#4a6a7a 55%,#1e2f38);}
.img.mau2{background:linear-gradient(135deg,#b76a35,#e0a45e 60%,#7a4520);}
.img.alg{background:linear-gradient(135deg,#c98f4e,#8a5a22 60%,#4a2f10);}
.img.chn{background:linear-gradient(135deg,#7a1f2b,#b83244 55%,#3d0f16);}
.img.irn2{background:linear-gradient(135deg,#2d6a8a,#7fb3c8 55%,#c98f4e);}
.img.tkm{background:linear-gradient(135deg,#3c3c3c,#161616);}
.img.syr{background:linear-gradient(135deg,#8a6b2d,#3d2f10);}
.img.soon{background:repeating-linear-gradient(45deg,#181818,#181818 14px,#111 14px,#111 28px);color:#555;}
.card .body{padding:22px;flex:1;display:flex;flex-direction:column;}
.badge{align-self:flex-start;background:var(--red);color:var(--cream);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;padding:5px 10px;margin-bottom:12px;}
.badge.soldout{background:#3a3a3a;}
.badge.soon-badge{background:transparent;border:1px solid #555;color:#888;}
.card h3{font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;line-height:1.05;}
.card h3 em{font-style:italic;color:var(--red);}
.meta{margin:12px 0 6px;font-size:13px;letter-spacing:.5px;color:#cfc4a8;line-height:1.7;}
.price-row{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;}
.price{font-family:'Anton',sans-serif;font-size:24px;}
.price small{font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;color:#cfc4a8;display:block;letter-spacing:1px;text-transform:uppercase;}
.btn{display:inline-block;background:var(--red);color:var(--cream);text-decoration:none;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:1px;padding:12px 20px;border:none;cursor:pointer;}
.btn:hover{background:#b5182f;}
.btn.ghost{background:transparent;border:2px solid #555;color:#888;cursor:default;}

/* Notify Me inline capture (progressive — hidden until the button is clicked) */
.notify-wrap{display:flex;align-items:center;}
.notify-form{display:none;align-items:center;}
.notify-form input{width:132px;padding:9px 10px;border:2px solid var(--red);border-right:none;background:var(--cream);color:var(--black);font-family:'Archivo',sans-serif;font-size:13px;}
.notify-form input:focus{outline:none;}
.notify-form button{background:var(--red);color:var(--cream);border:2px solid var(--red);font-family:'Archivo',sans-serif;font-weight:800;padding:9px 12px;cursor:pointer;font-size:13px;line-height:1;}
.notify-done{display:none;font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.5px;}

/* SOCIAL PROOF PILL */
.proof{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.5px;color:#cfc4a8;margin-top:10px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite;}
@keyframes pulse{50%{opacity:.35;}}

/* PAST TRIPS */
.past{background:var(--black);color:var(--cream);padding:80px 30px;}
.past .inner{max-width:1240px;margin:0 auto;}
.past h2{font-family:'Anton',sans-serif;font-size:clamp(36px,5vw,56px);text-transform:uppercase;color:var(--red);}
.past .sub{margin-top:10px;color:#cfc4a8;font-size:15px;}
.stats{display:flex;flex-wrap:wrap;gap:0;margin:36px 0 44px;border:3px solid var(--red);}
.stats div{flex:1;min-width:150px;text-align:center;padding:24px 10px;border-right:1px solid #2a2a2a;}
.stats div:last-child{border-right:none;}
.stats b{display:block;font-family:'Anton',sans-serif;font-size:40px;color:var(--cream);}
.stats span{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8f8570;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.gallery .shot{height:180px;border:3px solid var(--red);display:flex;align-items:flex-end;padding:12px;font-family:'Anton',sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--cream);text-shadow:0 1px 4px rgba(0,0,0,.6);}
.shot.s1{background:linear-gradient(160deg,#3c3c3c,#161616);}
.shot.s2{background:linear-gradient(160deg,#b76a35,#4a2a12);}
.shot.s3{background:linear-gradient(160deg,#2d6a8a,#12303f);}
.shot.s4{background:linear-gradient(160deg,#8a7a4d,#3f3418);}
.shot.s4{background:linear-gradient(160deg,#8a6b2d,#3d2f10);}
.shot.s5{background:linear-gradient(160deg,#6a2d8a,#2a1038);}

/* TESTIMONIALS */
.testimonials{background:var(--cream);padding:80px 30px;}
.testimonials .inner{max-width:1240px;margin:0 auto;}
.testimonials h2{font-family:'Anton',sans-serif;font-size:clamp(36px,5vw,56px);text-transform:uppercase;border-bottom:4px solid var(--black);padding-bottom:14px;}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:40px;}
.quote{background:var(--black);color:var(--cream);padding:28px;display:flex;flex-direction:column;}
.quote .mark{font-family:'Anton',sans-serif;font-size:52px;color:var(--red);line-height:.6;margin-bottom:16px;}
.quote p{font-size:15px;line-height:1.65;flex:1;}
.quote .who{margin-top:20px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:1.5px;}
.quote .who span{display:block;color:var(--red);margin-top:3px;}

/* MAILING LIST */
.mail{background:var(--red);padding:70px 30px;text-align:center;color:var(--cream);}
.mail h2{font-family:'Anton',sans-serif;font-size:clamp(34px,5vw,54px);text-transform:uppercase;line-height:.95;}
.mail p{margin:14px auto 28px;font-size:15px;max-width:520px;line-height:1.6;}
.mail form{display:flex;gap:0;max-width:520px;margin:0 auto;}
.mail input{flex:1;padding:16px 18px;border:3px solid var(--black);border-right:none;font-family:'Archivo',sans-serif;font-size:15px;background:var(--cream);color:var(--black);}
.mail input:focus{outline:none;}
.mail button{background:var(--black);color:var(--cream);border:3px solid var(--black);font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:1px;padding:16px 26px;cursor:pointer;}
.mail button:hover{background:#222;}
.mail .fine{font-size:11.5px;margin-top:14px;opacity:.8;}
.mail .success{display:none;font-family:'Anton',sans-serif;font-size:24px;text-transform:uppercase;margin-top:10px;}
@media(max-width:560px){.mail form{flex-direction:column;}.mail input{border-right:3px solid var(--black);}}

/* STRIP */
.strip{background:var(--red);color:var(--cream);text-align:center;padding:16px;font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:13px;}

/* FOOTER */
footer{background:var(--black);color:var(--cream);padding:60px 40px 40px;text-align:center;}
footer .logo{font-size:32px;}
footer p{margin-top:16px;font-size:13px;color:#8f8570;}
.foot-chevrons{display:flex;justify-content:center;gap:12px;margin:30px 0 10px;}

/* ---- Sold-out cards: visibly dimmed and desaturated. The Register Interest
   capture and the Sold Out badge stay at full strength so the next step is
   obvious. Hover previews stay off (no src is ever set on unhovered videos,
   and the muted look signals there's nothing to click). ---- */
.card.soldout .img{filter:grayscale(100%);}
.card.soldout .img img{opacity:.6;}
.card.soldout .img{border-bottom-color:#3a3a3a;}
.card.soldout h3,.card.soldout .meta,.card.soldout .price{opacity:.5;}
.card.soldout h3 em{color:inherit;}
.card.soldout:hover{transform:none;}

/* ---- Perk strapline on cards (value-add promo, e.g. the black-tie suit) ---- */
.card .perk-line{border:2px solid var(--red);padding:7px 10px;margin:10px 0 2px;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--cream);}