/* Shared top-level page structure.
   The homepage is the visual reference: centred orchard hero, neutral dusk overlay,
   photographic section rhythm and a consistent card / CTA system. */

/* Top-level pages start directly with the hero, like the homepage. */
.page-main .page-breadcrumbs {
  display: none;
}

/* Internal hero sections use one shared composition. */
.page-main .route-page-hero,
.page-main .about-hero,
.page-main .directory-hero {
  position: relative;
  min-height: 82svh;
  padding: 132px 20px 82px;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  color: #fff6d5;
  background-color: #10120b;
  background-image:
    radial-gradient(circle at 76% 18%, rgba(253, 213, 101, .14), transparent 27rem),
    linear-gradient(90deg, rgba(7, 9, 5, .56), rgba(9, 10, 6, .19) 50%, rgba(7, 8, 5, .46)),
    linear-gradient(180deg, rgba(5, 6, 4, .02), rgba(6, 7, 4, .52)),
    url("../img/orchard-hero.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-main .route-page-hero::before,
.page-main .about-hero::before {
  content: none;
}

.page-main .route-page-hero-inner,
.page-main .about-hero-inner,
.page-main .directory-hero-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1040px);
  margin: 0 auto;
  text-align: center;
}

.page-main .route-page-hero h1,
.page-main .about-hero h1,
.page-main .directory-hero h1 {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(2.7rem, 5.7vw, 5.2rem);
  line-height: 1.02;
}

.page-main .route-page-hero .hero-lede,
.page-main .about-hero .hero-lede,
.page-main .directory-hero .hero-lede {
  max-width: 780px;
  margin: 22px auto 0;
  color: rgba(255, 246, 213, .90);
  font-size: clamp(1.04rem, 1.7vw, 1.18rem);
  line-height: 1.62;
}

.page-main .route-page-hero .button-row,
.page-main .about-hero .button-row,
.page-main .directory-hero .button-row {
  justify-content: center !important;
}

/* Keep all general content sections on the same dark / photographic system.
   Tree lights and festoon lights alternate, as on the homepage. */
.page-main .route-page-section-light {
  color: #fff6d5;
  background:
    linear-gradient(180deg, rgba(7, 9, 5, .54), rgba(7, 9, 5, .40)),
    url("../img/tree-lights-cosy.png") center center / cover no-repeat;
}

.page-main .route-page-section-dark {
  color: #fff6d5;
  background:
    linear-gradient(180deg, rgba(7, 9, 5, .57), rgba(7, 9, 5, .43)),
    url("../img/festoon-lights.png") center center / cover no-repeat;
}

.page-main .route-page-cta-section {
  color: #fff6d5;
  background:
    linear-gradient(180deg, rgba(7, 9, 5, .58), rgba(7, 9, 5, .45)),
    url("../img/tree-lights-cosy.png") center center / cover no-repeat;
}

.page-main .route-page-section-light .section-label,
.page-main .route-page-section-dark .section-label,
.page-main .route-page-cta-section .section-label {
  color: #fdd565;
}

.page-main .section-heading h2 {
  font-size: clamp(2.3rem, 4.5vw, 4.05rem);
  line-height: 1.03;
}

.page-main .route-page-card h2,
.page-main .route-page-card h3,
.page-main .route-page-panel h2,
.page-main .about-panel h2,
.page-main .about-principle-card h3,
.page-main .about-cta-panel h2,
.page-main .directory-copy-panel h2,
.page-main .directory-guide-card h2 {
  line-height: 1.04;
}

.page-main .route-page-card h2,
.page-main .route-page-card h3 {
  font-size: clamp(1.9rem, 3.05vw, 2.9rem);
}

.page-main .route-page-panel h2,
.page-main .about-panel h2,
.page-main .about-cta-panel h2 {
  font-size: clamp(2.25rem, 4.4vw, 3.85rem);
}

.page-main .route-page-section-light .section-heading > p:not(.section-label),
.page-main .route-page-section-dark .section-heading > p:not(.section-label),
.page-main .route-page-section-light .route-page-card p,
.page-main .route-page-section-dark .route-page-card p,
.page-main .route-page-cta p {
  color: rgba(255, 246, 213, .85);
}

.page-main .section-heading > p:not(.section-label),
.page-main .route-page-card p,
.page-main .route-page-panel p,
.page-main .route-page-step p,
.page-main .about-panel p,
.page-main .about-principle-card p,
.page-main .about-cta-panel p,
.page-main .directory-copy-panel p,
.page-main .directory-guide-card p,
.page-main .business-details dd {
  font-size: clamp(1rem, 1.12vw, 1.06rem);
  line-height: 1.65;
}

/* Consistent cards: translucent cabin-like panels rather than mixed green/parchment styles. */
.page-main .route-page-card,
.page-main .route-page-panel,
.page-main .route-page-step,
.page-main .about-panel,
.page-main .about-principle-card,
.page-main .about-cta-panel,
.page-main .directory-copy-panel,
.page-main .directory-guide-card {
  position: relative;
  overflow: hidden;
  color: #fff6d5;
  border: 1px solid rgba(253, 213, 101, .20);
  background:
    linear-gradient(145deg, rgba(55, 51, 29, .58), rgba(12, 14, 8, .78));
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 213, .055),
    0 22px 58px rgba(0, 0, 0, .22);
}

.page-main .route-page-section-light .route-page-card {
  border-color: rgba(253, 213, 101, .20);
  background:
    linear-gradient(145deg, rgba(55, 51, 29, .58), rgba(12, 14, 8, .78));
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 213, .055),
    0 22px 58px rgba(0, 0, 0, .22);
}

.page-main .route-page-card p,
.page-main .route-page-panel p,
.page-main .route-page-step p,
.page-main .about-panel p,
.page-main .about-principle-card p,
.page-main .about-cta-panel p,
.page-main .directory-copy-panel p,
.page-main .directory-guide-card p {
  color: rgba(255, 246, 213, .85);
}

/* Final CTA panels echo the homepage's closing panel. */
.page-main .route-page-cta {
  padding: clamp(32px, 6vw, 60px);
  border: 1px solid rgba(253, 213, 101, .22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 8%, rgba(253, 213, 101, .06), transparent 20rem),
    linear-gradient(145deg, rgba(55, 51, 29, .58), rgba(12, 14, 8, .80));
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 213, .055),
    0 24px 64px rgba(0, 0, 0, .24);
}

.page-main .route-page-cta h2 {
  font-size: clamp(2.35rem, 4.35vw, 3.95rem);
  line-height: 1.03;
}

/* About follows the same image rhythm as the homepage. */
.page-about .about-story {
  background:
    linear-gradient(180deg, rgba(7, 9, 5, .54), rgba(7, 9, 5, .40)),
    url("../img/tree-lights-cosy.png") center center / cover no-repeat;
}

.page-about .about-principles {
  color: #fff6d5;
  background:
    linear-gradient(180deg, rgba(7, 9, 5, .57), rgba(7, 9, 5, .43)),
    url("../img/festoon-lights.png") center center / cover no-repeat;
}

.page-about .about-details {
  background:
    radial-gradient(circle at 82% 10%, rgba(253, 213, 101, .06), transparent 28rem),
    linear-gradient(180deg, #1a1b10, #10110b);
}

.page-about .about-principles .section-label,
.page-about .about-details .section-label {
  color: #fdd565;
}

.page-about .about-principles .section-heading > p:not(.section-label) {
  color: rgba(255, 246, 213, .85);
}

/* Directory follows the same tree -> festoon -> quiet closing rhythm. */
.page-cider-houses .directory-intro {
  background:
    linear-gradient(180deg, rgba(7, 9, 5, .54), rgba(7, 9, 5, .40)),
    url("../img/tree-lights-cosy.png") center center / cover no-repeat;
}

.page-cider-houses .directory-list-section {
  color: #fff6d5;
  background:
    linear-gradient(180deg, rgba(7, 9, 5, .57), rgba(7, 9, 5, .43)),
    url("../img/festoon-lights.png") center center / cover no-repeat;
}

.page-cider-houses .directory-guide {
  color: #fff6d5;
  background:
    radial-gradient(circle at 82% 10%, rgba(253, 213, 101, .06), transparent 28rem),
    linear-gradient(180deg, #1a1b10, #10110b);
}

.page-cider-houses .directory-list-section .section-label,
.page-cider-houses .directory-guide .section-label {
  color: #fdd565;
}

.page-cider-houses .directory-list-section .section-heading > p:not(.section-label) {
  color: rgba(255, 246, 213, .85);
}

/* The producer cards retain their individual colourways and logos. */
.page-cider-houses .directory-card {
  border-color: rgba(253, 213, 101, .16);
}

/* Headings above card grids use a common width/rhythm without forcing every section centred. */
.page-main .section-heading {
  max-width: 820px;
}

@media (max-width: 960px) {
  .page-main .route-page-hero,
  .page-main .about-hero,
  .page-main .directory-hero {
    min-height: 74svh;
    padding: 126px 20px 72px;
  }

  .page-main .route-page-cta .button-row {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .page-main .route-page-hero,
  .page-main .about-hero,
  .page-main .directory-hero {
    min-height: 70svh;
    padding: 118px 18px 64px;
    background-position: center;
  }

  .page-main .route-page-hero h1,
  .page-main .about-hero h1,
  .page-main .directory-hero h1 {
    font-size: clamp(2.55rem, 12.5vw, 4rem);
  }
}