/**
 * @file        home.css
 * @description Homepage — services teaser and the static book row (Stories 5.1, 5.2)
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         0ad74f16-8b23-4c95-9e07-63f2a5c18d40
 * @version     0.0.0.1
 * @created     2026-09-11
 * @updated     2026-09-11
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

.home__intro {
  font-size: var(--text-lg);
}

/* --- Services teaser ------------------------------------------------------ */

.home__services {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

/* Single column below the medium breakpoint. The banded layout's rule is that
   375px is the design target and wider viewports are the enhancement, so the
   multi-column form is the media query rather than the default. */
@media (min-width: 48rem) {
  .home__services {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home__service-title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.home__service-summary {
  margin: 0;
  color: var(--text-secondary);
  max-width: var(--measure);
}

/* --- Book row ------------------------------------------------------------- */

/* NOT a carousel in the widget sense. The flip preview is deferred for MVP-1
   (Story 5.2, sprint-status.md), and with it went every reason to script this:
   there is no autoplay to pause, no slide index to track and no motion to
   suppress under prefers-reduced-motion. What remains is a list that wraps.
   Horizontal overflow is deliberately NOT used — a scroll container would hide
   books behind a gesture, and FR11 requires every book here to stay reachable. */
.home__carousel {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 48rem) {
  .home__carousel {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.home__slide-link {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
}

/* The title is the link text, so it carries the underline that signals a link.
   Underlining the whole block, cover included, would be noise. */
.home__slide-title {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.home__slide-link:hover .home__slide-title,
.home__slide-link:focus-visible .home__slide-title {
  color: var(--text-link);
}

/* Focus lands on the <a>, which wraps the cover, so the ring must be drawn
   around the whole block rather than around the text alone. */
.home__slide-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--space-1);
}

/* Intrinsic size is declared on the <img> element too. Both are needed: the
   attributes reserve the space before CSS parses and are what keep CLS at 0,
   while these rules let the cover shrink on a narrow viewport. */
.home__cover {
  display: block;
  width: 10rem;
  height: auto;
  max-width: 100%;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
}

.home__slide-tagline {
  margin: var(--space-2) 0 0;
  max-width: var(--measure);
}

.home__slide-author {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}