/*
 * Home-page stylesheet entry point
 *
 * The base custom properties live in :root in hero-mockup.css because they are
 * shared with the site shell. Home-only rules are loaded here in cascade order.
 * Keep the imports in this order: it preserves the existing cascade exactly
 * while making each role and the few necessary final normalisations explicit.
 */

/* 1. Design tokens */
/* --type-*, --button-*, --ui-* and --radius-* are declared in hero-mockup.css. */

/* 7. Mobile media queries
 * Loaded first to retain the established component cascade below. */
@import url("mobile-home-final.css");

/* 6. Section-specific styles */
@import url("home-scroll-widgets.css");

/* 2. Shared typography */
@import url("home-typography.css");
@import url("home-heading-spacing.css");

/* 3. Shared links */
@import url("home-list-links.css");
@import url("home-card-detail-links.css");

/* 4. Shared buttons */
@import url("home-button-system.css");

/* 6. Section-specific refinements */
@import url("review-cta-refinement.css");

/* 7. Mobile media queries */
@import url("fixed-reservation-bar.css");
@import url("home-tap-targets.css");

/* 5. Shared cards and 8. required cascade normalisation */
@import url("home-surface-tokens.css");
@import url("home-radius-tokens.css");

/* 8. Required section exception: schedule cards prioritise the photograph.
 * The status ticker is a separate band before the visual, never an image overlay.
 */
body[data-page="home"] .schedule-card {
  display: flex;
  flex-direction: column;
}

body[data-page="home"] .schedule-card > .schedule-status-marquee {
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  flex: 0 0 28px;
  height: 28px;
  border-bottom: 1px solid rgba(232, 236, 242, .92);
}

body[data-page="home"] .schedule-card-visual {
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
}

body[data-page="home"] .schedule-card-body {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  body[data-page="home"] .schedule-card > .schedule-status-marquee {
    flex-basis: 26px;
    height: 26px;
  }

  body[data-page="home"] .schedule-card-visual {
    aspect-ratio: 2 / 3;
  }
}

/* 8. Required section exception: the recruit banner is the sole home-page CTA. */
body[data-page="home"] .terms-section {
  display: none;
}

body[data-page="home"] .recruit-section {
  padding-bottom: clamp(24px, 4vw, 32px);
}

body[data-page="home"] .recruit-hero-stage {
  width: min(100%, 860px);
}

body[data-page="home"] .recruit-hero-card {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .recruit-banner-link {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 10;
  padding: 8px;
  overflow: hidden;
  border-color: var(--ui-card-border);
  border-radius: var(--radius-large);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,249,252,.94));
  box-shadow: var(--ui-shadow-photo-card);
  text-decoration: none;
}

body[data-page="home"] .recruit-banner-link picture,
body[data-page="home"] .recruit-banner-link img {
  display: block;
  width: 100%;
  height: 100%;
}

body[data-page="home"] .recruit-banner-link img {
  object-fit: contain;
}

body[data-page="home"] .recruit-banner-more {
  position: absolute;
  right: 16px;
  bottom: 15px;
  z-index: 1;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: var(--radius-pill);
  background: rgba(36, 40, 45, .42);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
}

body[data-page="home"] .recruit-banner-link:focus-visible {
  outline: 2px solid rgba(96, 137, 221, .72);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  body[data-page="home"] .recruit-hero-stage {
    width: 100%;
  }

  body[data-page="home"] .recruit-banner-link {
    aspect-ratio: 16 / 10;
    padding: 7px;
  }

  body[data-page="home"] .recruit-banner-more {
    right: 13px;
    bottom: 12px;
    font-size: 9px;
  }
}