/* =========================================================
   INNER PAGES — shared patterns for standalone pages
   (service/location/blog detail templates, index pages,
   breadcrumbs, legal content). Reuses tokens/classes from
   variables.css / base.css / sections.css wherever possible.
========================================================= */

/* ---------- PAGE HERO (banner used at the top of every inner page) ---------- */
.page-hero{
  position:relative;min-height:38vh;display:flex;align-items:flex-end;color:var(--white);overflow:hidden;
}
.page-hero-media{position:absolute;inset:0;z-index:0;}
.page-hero-media img{width:100%;height:100%;object-fit:cover;}
.page-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(9,17,28,.92) 0%, rgba(9,17,28,.68) 45%, rgba(9,17,28,.42) 100%);
}
.page-hero-inner{position:relative;z-index:2;width:100%;padding-block:7.5rem 2.75rem;}
.page-hero h1{font-size:var(--fs-h1);text-transform:uppercase;letter-spacing:-.01em;max-width:20ch;}
.page-hero-sub{margin-top:.9rem;font-size:var(--fs-lead);opacity:.82;max-width:52ch;}
@media (max-width:640px){
  .page-hero{min-height:34vh;}
  .page-hero-inner{padding-block:6.5rem 2.25rem;}
}

/* Breadcrumb — sits above the page-hero title on the photo banner */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.78rem;letter-spacing:.02em;color:rgba(255,255,255,.72);margin-bottom:1.1rem;
}
.breadcrumb a{color:rgba(255,255,255,.72);transition:color var(--dur-fast) var(--ease-out);}
.breadcrumb a:hover{color:var(--white);text-decoration:underline;}
.breadcrumb .bc-sep{opacity:.5;}
.breadcrumb .bc-current{color:var(--white);font-weight:600;}

/* ---------- INDEX PAGE INTROS (services.html, location.html, gallery.html, blog.html) ---------- */
.index-intro{padding-block:var(--space-lg) var(--space-md);}
.index-intro .section-head-center h2{max-width:26ch;}
.index-intro p.lead{opacity:.72;font-size:var(--fs-lead);max-width:60ch;margin:1rem auto 0;text-align:center;}

/* Services / Locations index grid — reuses .service-card visuals outside the swiper */
.card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;
}
.card-grid .service-card{aspect-ratio:4/5;}
@media (max-width:900px){.card-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}

/* Location index list — simple linked chips with arrow, built on .area-chip */
.location-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.location-index-grid a.area-chip{justify-content:space-between;transition:color var(--dur-fast) var(--ease-out);}
.location-index-grid a.area-chip:hover{color:var(--accent-dark);}
.location-index-grid a.area-chip .lc-arrow{margin-left:auto;opacity:.5;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);}
.location-index-grid a.area-chip:hover .lc-arrow{opacity:1;transform:translateX(4px);}
@media (max-width:900px){.location-index-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.location-index-grid{grid-template-columns:1fr;}}

/* ---------- DETAIL PAGE LAYOUT (service / location / blog detail templates) ---------- */
.detail-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.detail-body p{opacity:.82;font-size:var(--fs-lead);margin-bottom:1.25rem;max-width:64ch;}
.detail-body h2{font-size:var(--fs-h3);margin:2.25rem 0 1rem;}
.detail-image{border-radius:var(--radius-md);overflow:hidden;margin:1.75rem 0;box-shadow:var(--shadow-sm);}
.detail-image img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;}

.benefit-list{display:grid;gap:1rem;margin:1.5rem 0 2rem;}
.benefit-item{display:flex;gap:.9rem;align-items:flex-start;}
.benefit-item svg{flex:none;color:var(--accent-dark);margin-top:.2rem;}
.benefit-item span{font-size:.98rem;opacity:.82;}

.detail-sidebar{position:sticky;top:6.5rem;display:grid;gap:1.5rem;}
.sidebar-card{
  background:var(--navy-900);color:var(--white);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.25rem);box-shadow:var(--shadow-md);
}
.sidebar-card h3{font-size:var(--fs-h3);margin-bottom:.6rem;max-width:20ch;}
.sidebar-card p{opacity:.72;font-size:.92rem;margin-bottom:1.5rem;max-width:34ch;}
.sidebar-card .btn{width:100%;justify-content:center;margin-bottom:.75rem;}
.sidebar-list{background:var(--off-white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.75rem;}
.sidebar-list h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;opacity:.7;}
.sidebar-list ul{display:grid;gap:.6rem;}
.sidebar-list a{font-size:.92rem;display:flex;align-items:center;gap:.5rem;transition:color var(--dur-fast) var(--ease-out);}
.sidebar-list a:hover{color:var(--accent-dark);}
@media (max-width:900px){
  .detail-layout{grid-template-columns:1fr;}
  .detail-sidebar{position:static;}
}

/* Mini FAQ used within detail templates (subset styling of the main .faq-item) */
.detail-faq{margin-top:1.5rem;display:grid;gap:.75rem;}

/* ---------- RELATED STRIP (related services / other areas / related posts) ---------- */
.related-strip{padding-block:var(--space-lg);border-top:1px solid var(--line);margin-top:var(--space-lg);}
.related-strip .section-head{margin-bottom:1.5rem;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.related-card{
  display:flex;flex-direction:column;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--line);transition:box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.related-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.related-card-media{aspect-ratio:4/3;overflow:hidden;}
.related-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out);}
.related-card:hover .related-card-media img{transform:scale(1.06);}
.related-card-body{padding:1.25rem 1.4rem;}
.related-card-body span.cat{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);font-weight:700;margin-bottom:.4rem;}
.related-card-body h4{font-size:1.05rem;margin-bottom:.4rem;}
.related-card-body p{font-size:.85rem;opacity:.65;}
@media (max-width:900px){.related-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.related-grid{grid-template-columns:1fr;}}

/* Suburb chip strip used at bottom of location detail pages */
.other-areas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;}
.other-areas a{
  padding:.55rem 1.1rem;border-radius:30px;border:1px solid var(--line);font-size:.82rem;font-weight:600;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.other-areas a:hover{background:var(--navy-900);border-color:var(--navy-900);color:var(--white);}

/* ---------- BLOG ARTICLE ---------- */
.article-meta{display:flex;gap:.9rem;align-items:center;font-size:.8rem;color:var(--charcoal-mid);margin-bottom:1rem;}
.article-meta .cat{color:var(--accent-dark);font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.article-media{border-radius:var(--radius-md);overflow:hidden;margin-bottom:2rem;box-shadow:var(--shadow-sm);}
.article-media img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;}
.article-body{max-width:72ch;}
.article-body p{opacity:.85;font-size:var(--fs-lead);margin-bottom:1.3rem;line-height:1.75;}
.article-body h2{font-size:var(--fs-h3);margin:2rem 0 1rem;}
.article-body ul{margin:0 0 1.3rem 1.3rem;display:grid;gap:.5rem;}
.article-body li{opacity:.82;font-size:1rem;list-style:disc;}

/* ---------- LEGAL PAGES (terms / privacy) ---------- */
.legal-content{max-width:76ch;margin-inline:auto;}
.legal-content h2{font-size:var(--fs-h3);margin:2.25rem 0 .9rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{opacity:.8;margin-bottom:1.1rem;line-height:1.75;}
.legal-content ul{margin:0 0 1.1rem 1.3rem;display:grid;gap:.5rem;}
.legal-content li{opacity:.8;list-style:disc;line-height:1.6;}
.legal-note{
  background:var(--accent-tint);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.25rem 1.5rem;margin-bottom:2rem;font-size:.9rem;opacity:.85;
}
.legal-updated{font-size:.85rem;opacity:.6;margin-bottom:2.5rem;}

/* ---------- ABOUT / CONTACT STANDALONE PAGE TWEAKS ---------- */
.page-section-tight{padding-block:var(--space-lg);}