/* Location pages – builds on css/site.css (same tokens, buttons, cards, FAQ, footer) */

/* ---------- Hero (photo, not video) ---------- */
.area-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:170px 0 88px; min-height:560px; display:flex; align-items:flex-end;
  background:var(--bg) var(--hero-img) center/cover no-repeat;
}
.area-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,8,11,0.92) 0%, rgba(6,8,11,0.7) 45%, rgba(6,8,11,0.35) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 35%);
}
.area-hero > .container{width:100%;}
.area-hero h1{color:var(--white); font-size:clamp(2.3rem, 5vw, 3.8rem); line-height:1.06; letter-spacing:-.02em; max-width:760px; text-wrap:balance;}
.area-hero-sub{margin:20px 0 22px; max-width:620px; color:#DCE2E8; font-size:1.12rem; line-height:1.6;}
.area-hero .hero-rating{margin:0;}
.area-hero .hero-ctas{margin-top:30px;}
@media (max-width:760px){
  .area-hero{padding:120px 0 56px; min-height:0;}
  .area-hero::before{background:linear-gradient(0deg, var(--bg) 0%, rgba(6,8,11,0.82) 45%, rgba(6,8,11,0.6) 100%);}
  .area-hero h1{font-size:clamp(2.1rem, 9vw, 2.6rem);}
  .area-hero-sub{font-size:1.02rem;}
}

/* breadcrumbs */
.crumbs ol{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:.82rem; color:var(--muted);}
.crumbs li{display:flex; align-items:center; gap:6px;}
.crumbs li + li::before{content:'/'; color:#47525E;}
.crumbs a{color:var(--text); text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs [aria-current]{color:var(--accent);}

/* ---------- Intro + coverage card ---------- */
.area-intro{background:var(--bg);}
.area-intro-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;}
@media (max-width:900px){ .area-intro-grid{grid-template-columns:1fr; gap:32px;} }
.area-copy h2{font-size:clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom:18px;}
.area-copy p{font-size:1.05rem; color:var(--text);}
.area-copy p + p{margin-top:16px; color:var(--muted);}

.coverage-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-soft);}
.coverage-card h3{font-size:1.1rem; margin-bottom:6px;}
.cov-row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); color:var(--text); font-size:.93rem; line-height:1.5;}
.cov-row > svg{flex-shrink:0; width:36px; height:36px; padding:8px; border-radius:10px; background:var(--brand-grad); border:1px solid rgba(74,171,232,0.35); color:var(--white);}
.cov-label{display:block; font-size:.72rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); margin-bottom:4px;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{display:inline-block; padding:4px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--silver); font-size:.78rem; font-weight:600; letter-spacing:.4px;}
.cov-near{padding-top:16px;}
.cov-near a{display:inline-block; margin:0 8px 8px 0; padding:7px 13px; border-radius:999px; border:1px solid var(--line); color:var(--silver); text-decoration:none; font-size:.85rem; font-weight:500; transition:border-color .2s ease, color .2s ease;}
.cov-near a:hover{border-color:var(--accent); color:var(--white);}

/* ---------- Town grid (hub pages) ---------- */
.area-towns{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.town-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
@media (max-width:1000px){ .town-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:640px){ .town-grid{grid-template-columns:1fr;} }
.town-card{display:flex; flex-direction:column; gap:12px; padding:24px; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); transition:border-color .25s ease, transform .25s ease;}
.town-card:hover{border-color:rgba(74,171,232,0.5); transform:translateY(-3px);}
.town-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.town-card h3{font-size:1.12rem;}
.town-card p{font-size:.92rem; flex:1;}
.town-link{display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:600; font-size:.9rem;}
.town-link svg{width:16px; height:16px; transition:transform .2s ease;}
.town-card:hover .town-link svg{transform:translateX(3px);}

/* ---------- Packages ---------- */
.area-packages{background:var(--bg);}
.pkg-cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
@media (max-width:1100px){ .pkg-cards{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:600px){ .pkg-cards{grid-template-columns:1fr;} }
.pkg-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:border-color .25s ease, transform .25s ease;}
.pkg-card:hover{border-color:rgba(74,171,232,0.45); transform:translateY(-3px);}
.pkg-card-media{position:relative; height:170px; background:var(--surface-2);}
.pkg-card-media img{width:100%; height:100%; object-fit:cover;}
.pkg-card-body{display:flex; flex-direction:column; flex:1; padding:22px;}
.pkg-card-body h3{font-size:.98rem; line-height:1.3; text-transform:uppercase; letter-spacing:.2px;}
.pkg-card-price{font-family:var(--serif); font-weight:800; font-size:1.6rem; color:var(--white); margin:10px 0 14px;}
.pkg-card-body ul{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:8px; flex:1;}
.pkg-card-body li{display:flex; gap:9px; font-size:.9rem; color:var(--text);}
.pkg-card-body li svg{width:15px; height:15px; stroke:var(--accent); fill:none; flex-shrink:0; margin-top:3px;}
.pkg-card-body .btn-pill{width:100%; height:46px; padding:0 18px; font-size:.92rem;}

/* ---------- Steps ---------- */
.area-steps{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
@media (max-width:900px){ .steps{grid-template-columns:1fr;} }
.steps li{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px;}
.step-n{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--brand-grad); border:1px solid rgba(74,171,232,0.4); color:var(--white); font-family:var(--serif); font-weight:800; margin-bottom:16px;}
.steps h3{font-size:1.05rem; margin-bottom:8px;}
.steps p{font-size:.93rem;}

/* ---------- FAQ ---------- */
.area-faq{background:var(--bg);}

/* ---------- Nearby links ---------- */
.area-links{background:var(--bg-2); border-top:1px solid var(--line);}
.link-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px;}
.link-card{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-decoration:none; transition:border-color .2s ease;}
.link-card span{color:var(--silver); font-weight:600;}
.link-card small{grid-column:1; color:var(--muted); font-size:.78rem;}
.link-card svg{grid-row:1 / span 2; grid-column:2; width:16px; height:16px; color:var(--accent);}
.link-card:hover{border-color:rgba(74,171,232,0.5);}

/* ---------- CTA band ---------- */
.area-cta{background:var(--bg); padding-top:72px;}
.cta-card{display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; padding:44px; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--brand) 0%, var(--surface) 70%); border:1px solid rgba(74,171,232,0.3);}
.cta-card h2{font-size:clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom:8px;}
.cta-card p{color:var(--text);}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap;}
.cta-actions .btn-pill{height:54px; padding:0 26px;}
@media (max-width:600px){ .cta-card{padding:28px 22px;} .cta-actions .btn-pill{flex:1 1 100%;} }

/* ---------- Areas index ---------- */
.area-index{background:var(--bg);}
.hub-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:start;}
@media (max-width:1000px){ .hub-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:640px){ .hub-grid{grid-template-columns:1fr;} }
.hub-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.hub-card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:22px 24px; text-decoration:none; border-bottom:1px solid var(--line); background:linear-gradient(135deg, rgba(15,80,121,0.35), transparent 70%); transition:background-color .2s ease;}
.hub-card-head h2{font-size:1.25rem;}
.hub-card-head span{display:block; margin-top:4px; color:var(--muted); font-size:.8rem;}
.hub-card-head svg{width:18px; height:18px; color:var(--accent); flex-shrink:0;}
.hub-card ul{list-style:none; margin:0; padding:14px 18px 18px; display:flex; flex-wrap:wrap; gap:8px;}
.hub-card li a{display:inline-block; padding:7px 13px; border-radius:999px; border:1px solid var(--line); color:var(--silver); text-decoration:none; font-size:.86rem; transition:border-color .2s ease, color .2s ease;}
.hub-card li a:hover{border-color:var(--accent); color:var(--white);}