/* ==========================================================================
   FEATURES PAGE STYLES
   ==========================================================================
   Styles specific to features.html. Nothing here duplicates what
   already exists in components.css — .btn, .card, .pill, .section-header
   are all reused as-is from the shared stylesheet. This file only adds
   the NEW layout pattern this page introduces: alternating left/right
   "feature detail" rows.
   ========================================================================== */


/* NOTE: .page-hero moved to components.css — About page needs this same
   pattern (eyebrow + centered heading + intro paragraph), and it no
   longer makes sense to keep a shared pattern inside a page-specific
   file. See components.css for the rule itself. This is a common real-
   world refactor: a style starts in one page's file, and once a SECOND
   page needs it, that's the signal to promote it to the shared file. */


/* ==========================================================================
   FEATURE DETAIL ROWS — the core pattern of this page. Each feature gets
   a full row: a visual on one side, problem/solution/benefit text on the
   other. Rows alternate which side the visual sits on (odd rows: visual
   right, even rows: visual left) purely through the CSS below — the HTML
   markup order never changes, so screen readers and keyboard navigation
   always encounter text-then-visual in a sensible, consistent order
   regardless of how it's visually arranged.
   ========================================================================== */

.feature-detail {
  padding-block: var(--space-4xl);
  border-bottom: 1px solid var(--color-border);
}

.feature-detail:last-of-type {
  border-bottom: none;
}

.feature-detail-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

/* The visual placeholder box. In the finished site this becomes a real
   cropped screenshot from the app (Daily Nudge card, Goal Health view,
   etc.) — see the HTML comments on each instance for exactly which
   screen to capture. */
.feature-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  background: var(--color-sky-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* A small "screenshot placeholder" label rendered directly on the
   placeholder box, so it's obvious in the browser (not just in code
   comments) exactly what real asset needs to replace it later. */
.feature-visual-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--color-brand-blue);
  background: rgba(255, 255, 255, 0.8);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1px dashed var(--color-brand-blue);
}

.feature-visual-label svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.feature-detail-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.feature-number {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.feature-detail-text h2 {
  font-size: var(--text-heading-lg);
}

/* The problem/solution/benefit structure inside each feature — three
   short labeled blocks instead of one long paragraph. Breaking text into
   labeled chunks like this is a real content-design decision: a reader
   scanning the page (most web readers scan before they read) can find
   "the benefit" in half a second instead of hunting through prose. */
.feature-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.feature-breakdown-item {
  display: flex;
  gap: var(--space-md);
}

/* BRANDING UPDATE: "Problem" now uses amber instead of pink. This was
   the single most-repeated pink element on the page — it appeared once
   per feature, six times as you scrolled — so it was doing a lot of the
   work in making the whole site read as "pink". Amber also carries
   better semantic meaning here: "something worth paying attention to",
   rather than pink's more decorative, upbeat connotation. */
.feature-breakdown-label {
  flex-shrink: 0;
  width: 88px;
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--color-amber);
  padding-top: 2px;
}

.feature-breakdown-item:nth-child(2) .feature-breakdown-label {
  color: var(--color-brand-blue);
}

.feature-breakdown-item:nth-child(3) .feature-breakdown-label {
  color: var(--color-success);
}

.feature-breakdown-text {
  font-size: var(--text-body-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* On desktop (1024px+), rows alternate which side the image sits on.
   We do this with CSS "order" — the HTML source order never changes
   (text always comes before the visual in the markup, which keeps the
   reading order correct for screen readers), we're only changing the
   VISUAL order for sighted users on wide screens. */
@media (min-width: 1024px) {
  .feature-detail-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
  }

  .feature-detail:nth-of-type(even) .feature-visual {
    order: -1; /* moves the visual to the left on even rows */
  }
}


/* ==========================================================================
   "HOW IT ALL FITS TOGETHER" — a small horizontal process strip showing
   the daily rhythm (log → AI reads pattern → coaching appears), placed
   between the feature rows and the closing CTA. This uses numbered
   markers because it genuinely IS a sequence — the design brief's own
   rule about not decorating with 01/02/03 unless order is meaningful
   applies here in reverse: this content is a real sequence, so numbering
   is the right call, not decoration.
   ========================================================================== */

.rhythm-section {
  padding-block: var(--space-5xl);
  background: var(--color-sand);
}

.rhythm-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  counter-reset: rhythm-step;
}

.rhythm-step {
  position: relative;
  padding-left: var(--space-4xl);
}

.rhythm-step::before {
  counter-increment: rhythm-step;
  content: counter(rhythm-step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand-gradient);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-body-md);
}

.rhythm-step h3 {
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-xs);
}

.rhythm-step p {
  font-size: var(--text-body-md);
}

/* A connecting line between steps on desktop, reinforcing that this is
   one continuous daily loop rather than three unrelated facts */
@media (min-width: 768px) {
  .rhythm-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .rhythm-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(100% - var(--space-lg));
    width: calc(var(--space-4xl) + var(--space-2xl));
    height: 1px;
    background: var(--color-border-strong);
  }
}


/* ==========================================================================
   FULL FEATURE GRID — the complete, categorized list of 15 documented
   feature areas. Deliberately compact cards (icon + short title + one
   or two lines), not full narrative paragraphs — this section exists
   to be scanned, not read start to finish. The longer-form sections
   above cover the philosophy; this covers the complete inventory.
   ========================================================================== */

.feature-full-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 640px) {
  .feature-full-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .feature-full-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-mini-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-medium) var(--ease-smooth),
              box-shadow var(--duration-medium) var(--ease-smooth),
              border-color var(--duration-medium) var(--ease-smooth);
}

.feature-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand-blue);
}

.feature-mini-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  color: var(--color-brand-blue);
}

.feature-mini-card-icon svg {
  width: 20px;
  height: 20px;
}

.feature-mini-card h3 {
  font-size: var(--text-body-md);
  font-weight: 700;
  color: var(--color-text-primary);
}

.feature-mini-card p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

.feature-mini-card-tier {
  display: inline-flex;
  width: fit-content;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-brand-blue);
  background: var(--color-sky-soft);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
}