/* Door Line Pilates — homepage styles
 *
 * Loaded only by the homepage (index.html), after assets/css/main.css. Every
 * rule is scoped to body.page-home, so nothing here reaches the other pages.
 *
 * Palette: Deep Green · Gold · Sage · Beige, from the brand PDF. The brand
 * tokens from main.css are redefined on body.page-home with identical values,
 * so keep both files in step. Values marked "derived" are not in the PDF: they
 * are shades added so text, labels and focus outlines meet WCAG AA. Gold is
 * about 3:1 on white, so it is used for rules and borders only, never for text
 * or focus outlines on light surfaces.
 *
 * Section colors are set in the HTML:
 *   data-surface="white | warm | brand"  section background
 *   data-tone="dark"                     switches the section to the on-green palette
 * All text colors below meet WCAG AA on the surface they are used on.
 */

.page-home {
  --color-primary: #244f46;        /* deep green */
  --color-primary-dark: #1b3b34;   /* derived: hover and footer */
  --color-ink: #24302d;            /* green-charcoal body text */
  --color-muted: #68736f;          /* grey-green secondary text */
  --color-gold: #b88a4a;           /* gold: decorative rules only */
  --color-gold-text: #816134;      /* derived: small labels on light */
  --color-gold-on-dark: #d4b992;   /* derived: labels on deep green */
  --color-sage: #dce9e3;           /* sage: hover tint, muted text on deep green */
  --color-beige: #e9ded0;          /* beige: footer text */
  --color-surface-alt: #f4f7f5;    /* pale green-white */
  --color-border: #dee5e3;         /* derived: hairlines */

  --hp-white: #ffffff;
  --hp-warm: #f4f7f5;              /* pale green-white */
  --hp-ivory: #f4f7f5;             /* text on deep green */

  /* Light tone (default) */
  --hp-bg: var(--hp-white);
  --hp-fg: var(--color-ink);
  --hp-heading: var(--color-primary);
  --hp-muted: var(--color-muted);
  --hp-label: var(--color-gold-text);
  --hp-rule: var(--color-border);
  --hp-accent: var(--color-gold);
  --hp-link: var(--color-primary);
  --hp-btn-bg: var(--color-primary);
  --hp-btn-fg: #ffffff;
  --hp-btn-hover: var(--color-primary-dark);
  --hp-ghost-fg: var(--color-primary);
  --hp-ghost-border: var(--color-primary);
  --hp-ghost-hover: var(--color-sage);
  --hp-focus: var(--color-primary);
}

.page-home [data-surface="white"] {
  --hp-bg: var(--hp-white);
}

.page-home [data-surface="warm"] {
  --hp-bg: var(--hp-warm);
}

.page-home [data-surface="brand"] {
  --hp-bg: var(--color-primary);
}

/* Dark tone: text and controls for sections on deep green. */
.page-home [data-tone="dark"] {
  --hp-fg: var(--hp-ivory);
  --hp-heading: var(--hp-ivory);
  --hp-muted: var(--color-sage);
  --hp-label: var(--color-gold-on-dark);
  --hp-rule: rgb(244 247 245 / 0.22);
  --hp-accent: var(--color-gold-on-dark);
  --hp-link: var(--hp-ivory);
  --hp-btn-bg: var(--hp-ivory);
  --hp-btn-fg: var(--color-primary);
  --hp-btn-hover: var(--color-sage);
  --hp-ghost-fg: var(--hp-ivory);
  --hp-ghost-border: rgb(244 247 245 / 0.6);
  --hp-ghost-hover: rgb(255 255 255 / 0.08);
  --hp-focus: var(--color-gold-on-dark);
}

/* Sections ---------------------------------------------------------------- */

.page-home .hp-section {
  padding-block: 3.5rem;
  background: var(--hp-bg);
  color: var(--hp-fg);
}

@media (min-width: 48em) {
  .page-home .hp-section {
    padding-block: 5rem;
  }
}

.page-home .hp-section h2,
.page-home .hp-section h3 {
  color: var(--hp-heading);
}

.page-home .hp-section a:not(.hp-button) {
  color: var(--hp-link);
}

.page-home .hp-section :focus-visible {
  outline-color: var(--hp-focus);
}

.page-home .hp-label {
  margin: 0 0 0.75rem;
  color: var(--hp-label);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.page-home .hp-label__num {
  margin-right: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.page-home .hp-head {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.page-home .hp-head h2 {
  margin-bottom: 0.75rem;
}

.page-home .hp-intro {
  margin: 0;
  color: var(--hp-muted);
}

.page-home .hp-link {
  font-weight: 600;
}

.page-home .hp-note {
  margin: 0;
  color: var(--hp-muted);
  font-size: 0.9375rem;
}

/* Buttons */
.page-home .hp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.page-home .hp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.625rem 1.375rem;
  background: var(--hp-btn-bg);
  color: var(--hp-btn-fg);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--hp-btn-bg);
  border-radius: 0.25rem;
}

.page-home .hp-button:hover {
  background: var(--hp-btn-hover);
  border-color: var(--hp-btn-hover);
}

.page-home .hp-button--ghost {
  background: transparent;
  color: var(--hp-ghost-fg);
  border-color: var(--hp-ghost-border);
}

.page-home .hp-button--ghost:hover {
  background: var(--hp-ghost-hover);
  border-color: var(--hp-ghost-border);
}

/* 1. Hero ----------------------------------------------------------------- */

/* Background: the class photo (a copy of ../Reference_Assets/backgrounds/
 * class_1_bg.jpg) is multiplied with deep green, so its highlights stay
 * exactly --hp-bg, and a 20% deep green overlay softens the photo on top. The
 * result is never lighter than --hp-bg, so every text color keeps the contrast
 * it has on plain deep green. */
.page-home .hp-hero {
  padding-block: 3.5rem 2.5rem;
  background-color: var(--hp-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--hp-bg) 20%, transparent), color-mix(in srgb, var(--hp-bg) 20%, transparent)),
    linear-gradient(var(--hp-bg), var(--hp-bg)),
    url("../images/hero-class.jpg");
  background-blend-mode: normal, multiply, normal;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-home .hp-hero__grid {
  display: grid;
  gap: 2.5rem;
}

.page-home .hp-hero__title {
  max-width: 14ch;
  margin-bottom: 1.25rem;
  color: var(--hp-heading);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.page-home .hp-hero__lead {
  max-width: 36rem;
  margin-bottom: 2rem;
  font-size: 1.1875rem;
}

/* Next training: open block with a gold rule on light surfaces; on a dark
 * hero it becomes a pale green-white panel so the date keeps maximum readability. */
.page-home .hp-next {
  align-self: end;
  padding-top: 1.25rem;
  border-top: 3px solid var(--hp-accent);
}

.page-home [data-tone="dark"] .hp-next {
  --hp-fg: var(--color-ink);
  --hp-heading: var(--color-primary);
  --hp-muted: var(--color-muted);
  --hp-label: var(--color-gold-text);
  --hp-link: var(--color-primary);
  --hp-focus: var(--color-primary);
  padding: 1.5rem;
  background: var(--hp-warm);
  color: var(--hp-fg);
  border-top-color: var(--color-gold);
}

.page-home [data-tone="dark"] .hp-next a {
  color: var(--hp-link);
}

.page-home [data-tone="dark"] .hp-next :focus-visible {
  outline-color: var(--hp-focus);
}

.page-home .hp-next__date {
  margin: 0 0 0.5rem;
  color: var(--hp-heading);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1.15;
}

.page-home .hp-next__course {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.page-home .hp-next__scope,
.page-home .hp-next__meta {
  margin: 0 0 0.25rem;
  color: var(--hp-muted);
}

.page-home .hp-next__meta {
  margin-bottom: 1rem;
}

/* The panel is light inside the dark hero, so the button takes the light-tone
 * colors (deep green with white text) instead of the hero's ivory button.
 * `a.` matches the specificity of the panel's link color rule above, which
 * would otherwise turn the label deep green. */
.page-home .hp-next a.hp-next__register {
  --hp-btn-bg: var(--color-primary);
  --hp-btn-fg: #ffffff;
  --hp-btn-hover: var(--color-primary-dark);
  color: var(--hp-btn-fg);
  display: flex;
  width: fit-content;
  margin-top: 1.25rem;
}

.page-home .hp-tagline {
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  color: var(--hp-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-top: 1px solid var(--hp-rule);
}

@media (min-width: 60em) {
  .page-home .hp-hero {
    padding-block: 6rem 3rem;
  }

  .page-home .hp-hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: 5rem;
  }

  .page-home .hp-hero__lead {
    margin-bottom: 2.5rem;
  }
}

/* 2. Accreditation -------------------------------------------------------- */

.page-home .hp-accreditation {
  border-block: 1px solid var(--color-gold);
}

.page-home .hp-accreditation__grid {
  display: grid;
  gap: 2rem;
}

.page-home .hp-accreditation__intro p {
  margin-bottom: 1rem;
}

.page-home .hp-logos {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .hp-logo {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--hp-rule);
}

.page-home .hp-logo:last-child {
  border-bottom: 1px solid var(--hp-rule);
}

.page-home .hp-logo__mark {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
}

/* Equal visual area instead of equal height, so the wide EuropeActive mark does
 * not dominate the compact TREPS mark. Original proportions are preserved. */
.page-home .hp-logo img {
  height: auto;
}

.page-home .hp-logo--europeactive img {
  width: 10.8rem;
}

.page-home .hp-logo--ereps img {
  width: 9.45rem;
}

.page-home .hp-logo--treps img {
  width: 8.3rem;
}

.page-home .hp-logo__caption {
  margin: 0;
  color: var(--hp-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (max-width: 22em) {
  .page-home .hp-logo {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 48em) {
  .page-home .hp-logos {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-home .hp-logo,
  .page-home .hp-logo:last-child {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 0.5rem 1.5rem;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid var(--hp-rule);
  }

  .page-home .hp-logo:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .page-home .hp-logo__mark {
    min-height: 5.5rem;
  }
}

@media (min-width: 60em) {
  .page-home .hp-accreditation__grid {
    grid-template-columns: 4fr 8fr;
    align-items: center;
    gap: 4rem;
  }

  .page-home .hp-logo--europeactive img {
    width: 14.8rem;
  }

  .page-home .hp-logo--ereps img {
    width: 12.95rem;
  }

  .page-home .hp-logo--treps img {
    width: 11.4rem;
  }
}

/* 3. Upcoming trainings timetable ----------------------------------------- */

.page-home .hp-timetable__list {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--hp-rule);
}

.page-home .hp-row {
  display: grid;
  gap: 0.375rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hp-rule);
}

.page-home .hp-row__date {
  margin: 0;
  color: var(--hp-label);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1.2;
}

.page-home .hp-row__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
}

.page-home .hp-row__scope {
  margin: 0;
  color: var(--hp-muted);
}

/* "Detaylar" above "Ön Kayıt"; the single auto column gives both the same width. */
.page-home .hp-row__actions {
  display: grid;
  justify-content: start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

/* Compact ghost button; fills deep green on hover so it reads as an action. */
.page-home .hp-row__link {
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  border-width: 1px;
}

.page-home .hp-row__link:hover {
  background: var(--hp-btn-bg);
  color: var(--hp-btn-fg);
  border-color: var(--hp-btn-bg);
}

.page-home .hp-row__arrow {
  font-size: 1.0625rem;
  line-height: 1;
}

/* Filled deep green, same size as "Detaylar", as the primary action. */
.page-home .hp-row__register {
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  border-width: 1px;
}

.page-home .hp-timetable__foot {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

@media (min-width: 60em) {
  .page-home .hp-row {
    grid-template-columns: 15rem 1fr auto;
    align-items: baseline;
  }

  .page-home .hp-row__date {
    font-size: 1.75rem;
  }

  .page-home .hp-row__actions {
    justify-content: end;
    margin: 0;
  }

  .page-home .hp-timetable__foot {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2rem;
  }
}

/* 4. Education programs: numbered index ----------------------------------- */

.page-home .hp-programs {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

.page-home .hp-group-title {
  margin: 0 0 0.75rem;
  color: var(--hp-label);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-home .hp-index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--hp-rule);
}

.page-home .hp-index__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.25rem 1rem;
  padding-block: 1.375rem;
  border-top: 1px solid var(--hp-rule);
}

.page-home .hp-index__title,
.page-home .hp-index__meta,
.page-home .hp-index__outcome {
  grid-column: 2;
}

.page-home .hp-index__num {
  grid-column: 1;
  grid-row: 1 / span 3;
  color: var(--hp-label);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
}

.page-home .hp-index__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.page-home .hp-index__title a {
  text-decoration: none;
}

/* The whole row is clickable; the link's accessible name stays the title. */
.page-home .hp-index__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.page-home .hp-index__item:hover .hp-index__title a {
  text-decoration: underline;
}

.page-home .hp-index__meta,
.page-home .hp-index__outcome {
  margin: 0;
}

.page-home .hp-index__meta {
  color: var(--hp-muted);
  font-size: 0.9375rem;
}

.page-home .hp-index__arrow {
  display: none;
}

@media (min-width: 60em) {
  .page-home .hp-index__item {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.1fr) 2rem;
    align-items: baseline;
    gap: 0.25rem 2rem;
  }

  .page-home .hp-index__num {
    grid-row: 1 / span 2;
  }

  .page-home .hp-index__outcome {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .page-home .hp-index__arrow {
    display: block;
    grid-column: 4;
    grid-row: 1;
    color: var(--hp-label);
    font-size: 1.25rem;
    text-align: right;
  }
}

/* 5. Education system ----------------------------------------------------- */

.page-home .hp-approach__grid {
  display: grid;
  gap: 1rem;
}

.page-home .hp-pillars {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .hp-pillar {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1rem;
}

.page-home .hp-pillar__num {
  grid-row: span 2;
  color: var(--hp-label);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
}

.page-home .hp-pillar h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
}

.page-home .hp-pillar p {
  margin: 0;
  color: var(--hp-muted);
}

@media (min-width: 60em) {
  .page-home .hp-approach__grid {
    grid-template-columns: 5fr 7fr;
    gap: 5rem;
  }

  .page-home .hp-approach__grid .hp-head {
    margin-bottom: 0;
  }
}

/* 6. Closing call to action ----------------------------------------------- */

.page-home .hp-cta__grid {
  display: grid;
  gap: 1.5rem;
}

.page-home .hp-cta h2 {
  margin-bottom: 0.75rem;
}

.page-home .hp-cta p {
  margin: 0;
}

.page-home .hp-cta__phone {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
}

@media (min-width: 60em) {
  .page-home .hp-cta__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: 5rem;
  }
}

/* Shared header and footer on this page ------------------------------------ */

/* main.css draws focus outlines in the accent color, which is too light on
 * white here: use deep green in the header and for the skip link. */
.page-home .site-header :focus-visible,
.page-home .skip-link:focus-visible {
  outline-color: var(--color-primary);
}

/* Match the two palette-tinted values hard-coded in main.css. */
.page-home .site-footer__bottom {
  border-top-color: rgb(233 222 208 / 0.25);
}

@media (min-width: 60em) {
  .page-home .submenu {
    box-shadow: 0 0.75rem 1.5rem rgb(36 48 45 / 0.12);
  }
}