/* =====================================================

   EQUINE THERAPY PAGE  (equine.css)

   Shared header/footer rules can be moved into main.css

   once the other pages are using the same markup.

   Font spec (Equine Therapy - Nervous System):

   Quote = Madelyn | Quote Author = Georgia Regular |

   Heading 1 = TBD (Great Vibes for now) |

   Sub-Heading 1 = Alegreya Sans, larger + bold |

   Sub-Heading 2 = Alegreya Sans bold |

   All other text = Alegreya Sans

   ===================================================== */

/* ---------- Local fonts ---------- */

/* Uncomment and fix the file paths when you have the Madelyn

   font files (otherwise the quote falls back to Great Vibes). */

/*

@font-face {

  font-family: 'Madelyn';

  src: url('../fonts/Madelyn.woff2') format('woff2'),

       url('../fonts/Madelyn.woff') format('woff');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

*/

/* ---------- Hero ---------- */

.hero { position: relative; }

.hero-quote {

  position: absolute;

  top: 35px;

  right: 42px;

  left: auto;    /* override main.css's left: 25% */

  bottom: auto;  /* override main.css's bottom: 14% — was stretching the box */

  display: flex;

  flex-direction: column;

  align-items: flex-end;   /* quote + attribution hug the top-right corner */

  gap: 6px;                /* exact space between quote and author */

  max-width: 80%;          /* wraps nicely if the line gets long */

  text-align: right;

  color: #ffffff;

  margin: 0;

}

.hero-quote p {

  font-family: 'Madelyn', 'Great Vibes', cursive;  /* cursive script look */

  font-weight: 400;

  font-size: 34px;

  line-height: 1.3;

  margin: 0;

}

.hero-quote cite {

  font-family: Georgia, 'Times New Roman', serif;  /* normal font, like the original */

  font-style: normal;

  font-weight: 400;

  font-size: 28px;

  line-height: 1.2;

  margin: 0;

}

/* ---------- Main content ---------- */

.therapy-content {

  background: #FFFDF5;

  padding: 55px 20px 95px;

}

.script-heading {
  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
    font-style: italic;
  font-size: 48px;
  color: #1f2a35;   /* darker, like the bottom heading */
  text-align: center;
  margin: 0 0 48px;
  opacity: 1;
}

.section-lead {

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;  /* spec: Sub-Heading 1 */

  font-weight: 700;

}

.bold-line    { font-weight: 700; }

.content-column a {

  color: #a9825f;

  text-decoration: underline;

}

.content-column a:hover { color: #8a6a45; }

.read-more { margin-bottom: 12px; }

/* ---------- Photo row ---------- */

.photo-row {

  display: flex;

  justify-content: center;

  gap: 30px;

  margin: 95px auto 0;

  padding: 0 20px;

  max-width: 1800px;      /* keeps the trio large but off the screen edges */

}

.photo-row img {

  flex: 1 1 0;          /* each photo gets an equal share of the row */

  min-width: 0;         /* allows images to shrink below their file size */

  width: auto;

  aspect-ratio: 4 / 5;  /* keeps the same 100:125 ratio as before */

  height: auto;

  object-fit: cover;

  display: block;

}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {

  .hero-quote { top: 20px; right: 18px; gap: 4px; }

  .hero-quote p { font-size: 24px; }

  .hero-quote cite { font-size: 20px; }

  .photo-row { gap: 16px; }   /* CHANGED: tighter gap on mobile */

}

/* ---------- Equine Osteopathy Sessions page ---------- */

/* Font spec (Equine Therapy – Sessions):

   Heading 1 = Alegreya (serif), bigger than the paragraph text |

   Sub-headings = Alegreya Sans (bold) | All other text = Alegreya Sans */

.osteopathy-content {

  background: #FFFDF5;

  padding: 0 20px;

  text-align: center;

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif; /* all other text = Alegreya Sans */

}

/* Heading 1 — Alegreya (serif), clearly bigger than the 17px paragraph text.

   Scoped to this page so the EB Garamond .page-title on other pages is untouched. */

.osteopathy-content .page-title {

  font-family: "Alegreya", Georgia, serif;

  font-weight: 400;

  font-size: 36px;

  color: #2f2f2f;

  margin: 0 0 45px;

}

/* Two photos across the top — equal VISIBLE height, no cropping */
.page-photos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding-top: 22px;
  margin: 0 auto 55px;
  max-width: 1300px;
}

.page-photos img {
  flex: 0 0 auto;
  display: block;
  width: auto;
  max-width: none;
  height: clamp(180px, 25vw, 370px);
  aspect-ratio: auto;
  object-fit: contain;
}

/* Bold section labels — spec: Sub-headings = Alegreya Sans (bold) */

.block-title {

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  font-weight: 700;

  margin: 26px 0 10px;

}

.block-title.first { margin-top: 0; }

/* Bold question headings — spec: sub-headings = Alegreya Sans (bold) */

.question {

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  font-weight: 700;

  margin: 30px 0 12px;

}

.dot-list {

  list-style: none;

  margin: 0 0 20px;

  padding: 0;

  text-align: center;

}

.dot-list li {

  margin-bottom: 10px;

}

.dot-list li::before {

  content: "\00B7";

  margin-right: 10px;

}

/* Four-photo Sessions grid — equally sized panels, complete images. */
.osteopathy-content .photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
  align-items: stretch;
  gap: 28px 36px;
  max-width: 796px;
  margin: 30px auto 40px;
}

.osteopathy-content .photo-grid img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 340px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #EEE9E0; /* warm mat makes all four panels look the same size */
}

/* Full-width gallery carousel */

.gallery-carousel { position: relative; }

.carousel-track {

  display: flex;

  gap: 4px;

  overflow-x: auto;

  scroll-behavior: smooth;

  scrollbar-width: none;

}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track img {
  flex: 0 0 auto;
  display: block;
  height: 550px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.carousel-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 34px;

  height: 34px;

  border-radius: 50%;

  border: none;

  background: rgba(60, 55, 45, 0.55);

  color: #ffffff;

  font-size: 16px;

  line-height: 1;

  cursor: pointer;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content: center;

}

.carousel-btn:hover { background: rgba(60, 55, 45, 0.8); }

.carousel-btn.prev { left: 90px; }

.carousel-btn.next { right: 90px; }

/* Cream gap between carousel and footer */

.after-carousel { height: 210px; background: #FFFDF5; }

@media (max-width: 768px) {
  /* Stack the top pair so both stay full-size on narrow screens. */
  .page-photos {
    flex-direction: column;
    gap: 18px;
  }

  .page-photos img {
    height: min(40vw, 240px);
  }

  /* Keep four equal-sized panels on mobile, one per row. */
  .osteopathy-content .photo-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 380px;
    gap: 20px;
  }

  .osteopathy-content .photo-grid img {
    height: clamp(230px, 80vw, 340px);
  }

  .carousel-track img { height: 300px; }
  .carousel-btn.prev { left: 10px; }
  .carousel-btn.next { right: 10px; }
  .after-carousel { height: 80px; }
}

/* ---------- Castration Trauma / Gelding Trauma / VEO page ---------- */

/* Font spec (Equine Therapy – Gelding Trauma):

   Heading 1 = TBD (kept as EB Garamond italic for now) |

   Sub-Heading 1 = Alegreya Sans (bold) |

   Paragraph = Alegreya Sans */

.veo-content {

  padding: 40px clamp(20px, 5vw, 95px) 170px;

  text-align: center;

}

/* 2x2 image grid at the top */

.veo-images {

  display: grid;

  grid-template-columns: repeat(2, min(40vw, 340px));  /* was min(30vw, 200px) */

  column-gap: 36px;

  row-gap: 30px;

  justify-content: center;

  margin-bottom: 45px;

}

.veo-images img {

  width: 100%;

  height: 220px;          /* was 140px */

  object-fit: contain;

  background: #fff;

  display: block;

}

.veo-column {

  width: 100%;

  max-width: 1360px;  /* centered text column, matching the reference screenshot */

  margin: 0 auto;

}

/* Heading 1 — TBD in the spec. Kept as EB Garamond italic

   until the final heading font is chosen. */

.veo-title {

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  font-style: italic;

  font-weight: 700;

  font-size: 32px;

  text-align: center;

  color: #333333;

  margin: 0 0 28px;

  margin-right: 124px;

}

/* Sub-Heading 1 — spec: Alegreya Sans (bold) */

.veo-subhead {

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  font-size: 24px;

  font-weight: 700;

  color: #222222;

  margin: 36px 0 18px;

}

.veo-subsub {

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  font-size: 24px;

  font-weight: 700;

  color: #222222;

  margin: 28px 0 14px;

}

/* Dash bullet lists — list text is paragraph copy, so it inherits

   Alegreya Sans from .content-column */

.veo-list {

  list-style: none;

  margin: 0 0 22px;

  padding: 0;

}

.veo-list li {

  padding-left: 0;

  margin-bottom: 14px;

  line-height: 1.55;

}

.veo-list li::before {

  content: "-";

  margin-right: 10px;

  color: #333333;

}

/* ---------- Quote band (beige strip with gold script) ---------- */

/* Spec: Quote = Madelyn | Quote Author = Georgia Regular */

.quote-band {

  background: #E6DCD2;

  padding: 24px 20px 18px; /* less space above and below quote graphic */

  text-align: center;

}

.band-quote { margin: 0; }

/* Quote image on the Nervous System page only.

   Do not change the other pages' quote layouts. */

.quote-band .intro__quote {

  width: 100%;

  max-width: none;

  margin: 0;

  padding: 0;

}

.quote-band .intro__quote-photo {

  display: block;

  width: min(100%, 900px); /* adjust 900px up/down to resize graphic */

  height: auto;

  margin: 0 auto;

}

/* the quote line itself — Madelyn, falling back to Great Vibes */

.band-quote p {

  font-family: 'Madelyn', 'Great Vibes', cursive;

  font-weight: 400;

  font-size: 48px;

  line-height: 1.5;

  color: #B08D4F;

  margin: 0;

}

/* the attribution — Georgia Regular, not italic */

.band-quote cite {

  display: block;

  margin-top: 10px;

  font-family: Georgia, 'Times New Roman', serif;

  font-style: normal;

  font-weight: 400;

  font-size: 18px;

  line-height: 1.4;

  color: #B08D4F;

}

/* ---------- Full-screen hero photo ---------- */

/* The photo fills the whole viewport (no letterboxing);

   object-fit: cover crops the edges so it always fills. */

.hero--short img {

  width: 100%;

  height: 100vh;

  height: 100svh;            /* modern viewport height where supported */

  object-fit: cover;

  display: block;

}

/* ---------- Diagram + divider + page title ---------- */

.nervous-diagram {

  display: block;

  width: 580px;

  margin: 10px auto 0;

}

.section-divider {

  width: 30px;

  height: 1px;

  background: #c9c9c9;

  margin: 55px auto 60px;

}

/* Sub-Heading 1 — spec: Alegreya Sans, larger + bold */

.page-title {

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  font-weight: 700;

  font-size: 40px;

  color: #2f2f2f;

  text-align: center;

  margin: 0 0 45px;

}

/* ---------- Bold sub-headings inside the text ---------- */

/* Sub-Heading 2 — spec: Alegreya Sans bold */

.subhead {

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  font-weight: 700;

  font-size: 24px;

  text-align: left;

  margin: 42px 0 12px;


}

/* Paragraph = Alegreya Sans (spec, applies to the whole content column,

   including the VEO / Gelding Trauma page) */

.content-column {

  text-align: left;

  font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;  /* spec: Paragraph = Alegreya Sans */

  font-size: 1.5rem;

  line-height: 1.6;

  margin-left: 5rem;

}

/* ---------- "·" bullet lists ---------- */

.bullet-list {

  list-style: none;

  margin: 0 0 8px;

  padding: 0;

  text-align: left;

}

.bullet-list li {

  padding-left: 0;

  margin-bottom: 14px;

  line-height: 1.55;

}

.bullet-list li::before {

  content: "-";

  margin-right: 10px;

  color: #333333;

}

/* ---------- Benefits list (bold lines, no bullets) ---------- */

.benefit-list {

  list-style: none;

  margin: 0;

  padding: 0;

}

.benefit-list li {

  font-weight: 700;

  margin-bottom: 26px;

}

.stray-bullet { margin: 0 0 26px; }

/* =====================================================

   OSTEOPATHY SESSIONS — ALIGNMENT AND SIDE MARGINS

   Main title centered; all section headings and text left.

   Keep this scoped to the Sessions page only.

   ===================================================== */

/* Center the main page title only. */

.osteopathy-content .page-title {

  text-align: center;

}

/* Constrain the text to create balanced left and right margins. */

.osteopathy-content .content-column {

  max-width: 1260px;

  width: 100%;

  margin-left: auto;

  margin-right: auto;

  text-align: left;

}

/* Section headings and question headings align with the paragraphs. */

.osteopathy-content .block-title,

.osteopathy-content .question {

  text-align: left;

}

/* Keep lists left-aligned, with a modest bullet indent. */

.osteopathy-content .dot-list {

  text-align: left;

  padding-left: 28px;

}

/* ---------- Castration Trauma: all text left-aligned ---------- */
/* Keep the existing side margins and image layout unchanged. */
.veo-content .veo-column {
  text-align: left;
}

/* =====================================================
   EQUINE THERAPY OVERVIEW ONLY — RESPONSIVE FIXES
   Scoped to the overview page; other equine pages stay unchanged.
   ===================================================== */

/* The white.png quote graphic has substantial transparent padding.
   To match the reference screenshot, the graphic must be enlarged and
   positioned beyond the hero edges, while the HERO itself clips overflow.
   These viewport-based values preserve its proportions across desktops. */
.therapy-overview-hero .therapy-quote-image {
  position: absolute;
  z-index: 2;
  top: -41.2vw;
  right: -38vw;
  bottom: auto;
  left: auto;
  width: 127vw;
  height: auto;
  max-width: none;
  max-height: none;
  transform: none;
  display: block;
  pointer-events: none;
}

.therapy-overview-hero .therapy-quote-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
}

/* Center the entire text column, not just the heading. */
.therapy-content .content-column {
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem);
  line-height: 1.65;
}

.therapy-content .section-lead {
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  line-height: 1.45;
  font-weight: 700;
}

@media (max-width: 768px) {
  /* Keep the writing prominent in the upper-right of the horse photo.
     The underlying PNG has large empty/transparent borders, so its full
     element is intentionally wider than the phone screen. */
  .therapy-overview-hero .therapy-quote-image {
    top: -62vw;
    right: -62vw;
    bottom: auto;
    left: auto;
    width: 205vw;
    height: auto;
    max-width: none;
    max-height: none;
    transform: none;
  }

  .therapy-content {
    padding: 35px 22px 65px;
  }

  .therapy-content .script-heading {
    font-size: clamp(2.1rem, 9vw, 3rem);
    line-height: 1.15;
    margin-bottom: 32px;
  }

  .therapy-content .content-column {
    width: 100%;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.65;
  }

  .therapy-content .section-lead {
    font-size: 1.375rem;
    line-height: 1.45;
  }

  .therapy-content .photo-row {
    gap: 10px;
    padding: 0;
    margin-top: 55px;
  }
}


/* ==========================================
   CASTRATION TRAUMA — MOBILE ALIGNMENT FIX
   ========================================== */

@media (max-width: 768px) {

  /* Center the main heading over the body text */
  .veo-content .veo-title {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    width: 100%;
  }

  /* Keep body text and section headings aligned */
  .veo-content .veo-column {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .veo-content .veo-subhead,
  .veo-content .veo-subsub {
    text-align: left;
  }
}


/* ==========================================
   CASTRATION TRAUMA — CENTER MOBILE HEADINGS
   ========================================== */

@media (max-width: 768px) {

  /* Center all section headings */
  .veo-content .veo-subhead,
  .veo-content .veo-subsub {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Keep paragraphs and lists left-aligned */
  .veo-content .veo-column p,
  .veo-content .veo-list {
    text-align: left;
  }

}


/* ==========================================
   NERVOUS SYSTEM — MOBILE HEADER ALIGNMENT
   ========================================== */

@media (max-width: 768px) {

  /* Center section headings above body text */
  .therapy-content .content-column .subhead {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Keep body paragraphs left-aligned */
  .therapy-content .content-column {
    text-align: left;
  }

}