/* ---------------------------------------------------------------
   Home page sections.
   Rhythm alternates weight deliberately: loud ink hero, quiet white
   band, calm grey category field, loud full-bleed photograph, quiet
   product row. Sections of uniform weight read monotonous however
   generous the spacing.
   --------------------------------------------------------------- */

.ss-home { margin: 0; }

.ss-section__inner,
.ss-listband__inner {
  max-width: var(--ss-max);
  margin-inline: auto;
  padding-inline: var(--ss-gutter);
}
.ss-section { padding: 56px 0 60px; }
.ss-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.ss-section__head h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.ss-section__head span,
.ss-section__more { font-size: 14px; color: var(--ss-muted); font-weight: 500; text-decoration: none; }
.ss-section__more:hover { color: var(--ss-ink); }

/* ---------- hero ---------- */
.ss-hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  background: var(--ss-ink);
  align-items: stretch;
}
.ss-hero__text {
  color: #EDF1F4;
  padding: clamp(44px, 6vw, 80px) clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  margin-left: auto;
  width: 100%;
}
.ss-hero__text h1 {
  color: #EDF1F4;
  font-size: clamp(30px, 4.2vw, 53px);
  line-height: 1.03;
  letter-spacing: -.032em;
  margin: 0;
  /* 15ch broke this into three lines whose longest ran 308px inside a 576px
     column - two thirds the width of the paragraph under it, which read as a
     headline that had been squeezed. 18ch sets it on two lines at 511px,
     just past the lede, and still keeps a margin to the column edge. */
  max-width: 18ch;
}
.ss-hero__text h1 em { font-style: normal; color: var(--ss-yellow); }
.ss-hero__text p {
  color: #A9B3BD;
  font-size: clamp(15px, 1.4vw, 16.5px);
  margin: 22px 0 0;
  /* 43ch left an 87px orphan on the third line; 48ch settles it on two. */
  max-width: 48ch;
}
.ss-hero__ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.ss-btn--outline {
  background: transparent;
  color: #EDF1F4;
  border: 1px solid #39424B;
}
.ss-btn--outline:hover { background: #1B2229; color: #EDF1F4; border-color: #4A545E; }

.ss-hero__img { position: relative; min-height: 470px; overflow: hidden; }
.ss-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Stacked, the hero stops being a text column beside a photograph and
   becomes a photograph above a panel. A panel that runs the full width of
   the screen has no left edge to anchor against, so the type centres and
   the whole thing reads as one composed hero rather than a leftover column. */
@media (max-width: 860px) {
  .ss-hero { grid-template-columns: 1fr; }
  .ss-hero__text {
    max-width: none;
    margin-left: 0;
    order: 2;
    text-align: center;
    align-items: center;
  }
  .ss-hero__img { order: 1; min-height: 300px; }
  .ss-hero__text h1 { margin-inline: auto; }   /* cap lives in pages.css */
  .ss-hero__text p  { margin-inline: auto; }
  .ss-hero__ctas { justify-content: center; }
}

@media (max-width: 780px) {
  .ss-hero__text { padding-block: clamp(38px, 9vw, 56px); }
  /* Fluid, so the two lines keep their margin on every handset rather than
     only on the one they were measured against. A fixed 34px fitted 390px
     comfortably but ran to 3px of the gutter on a 375px phone. 8.7vw hits
     34px at 390 and scales down from there. */
  .ss-hero__text h1 { font-size: clamp(27px, 8.7vw, 34px); line-height: 1.08; }
  .ss-hero__text p  { font-size: 18px; max-width: 34ch; margin-top: 18px; }
  .ss-hero__ctas { margin-top: 26px; }

  .ss-section__head h2 { font-size: 26px; }
  .ss-section__head span,
  .ss-section__more { font-size: 15px; }
}

/* ---------- school list band ---------- */
.ss-listband { background: var(--ss-surface); border-bottom: 1px solid var(--ss-hair); }
.ss-listband__inner {
  padding-block: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ss-listband h2 { margin: 0; font-size: clamp(19px, 2.2vw, 22px); }
.ss-listband p { margin: 4px 0 0; color: var(--ss-muted); font-size: 14.5px; }

/* ---------- services photograph ---------- */
.ss-photoband { position: relative; min-height: 300px; display: flex; align-items: center; overflow: hidden; }
.ss-photoband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-photoband__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,23,28,.90) 0%, rgba(18,23,28,.68) 42%, rgba(18,23,28,.08) 100%);
}
.ss-photoband__text {
  position: relative;
  color: #fff;
  max-width: var(--ss-max);
  width: 100%;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 60px) var(--ss-gutter);
}
/* 18ch broke a 364px line across two, and at 31px this was the smallest
   section heading on the site while carrying a full-bleed photograph. It now
   holds one line and sits closer to the weight of the other band headings. */
.ss-photoband__text h2 {
  color: #fff;
  margin: 0;
  font-size: clamp(26px, 3.4vw, 36px);
  max-width: 24ch;
}
/* 44ch ended on a 232px stub; 56ch settles it on two even lines. */
.ss-photoband__text p { color: #C6CED6; margin: 14px 0 0; max-width: 56ch; font-size: 16px; }
.ss-photoband__links { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.ss-photoband__links a {
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 2px solid var(--ss-yellow);
  padding-bottom: 4px;
}
.ss-photoband__links a:hover { color: var(--ss-yellow); }
@media (max-width: 700px) {
  .ss-photoband__scrim { background: linear-gradient(180deg, rgba(18,23,28,.62) 0%, rgba(18,23,28,.90) 62%); }
  .ss-photoband__text p { max-width: none; }
}

/* The product shortcode inside a home section keeps the shop card styling. */
.ss-section .woocommerce { margin: 0; }
.ss-section .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }

/* ---------- home sections on a phone ---------- */
@media (max-width: 780px) {
  .ss-listband h2 { font-size: 22px; }
  .ss-listband p  { font-size: 16.5px; }

  /* One line here runs 329px inside a 350px column. Two balanced lines with
     a real margin read better than one that touches the gutter. */
  .ss-photoband__text h2 { font-size: 28px; max-width: 20ch; }
  .ss-photoband__text p  { font-size: 18px; }
  .ss-photoband__links a { font-size: 16px; }
}

/* Once the two hero buttons stack, unequal widths centred under a centred
   headline read as an accident. Stacked, they match and fill the column,
   which is also the bigger thumb target. */
@media (max-width: 560px) {
  .ss-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
  }
  .ss-hero__ctas .ss-btn { text-align: center; }
}