/* home.css */
/* Homepage. Everything here is layout and rhythm; colours come from the ported tokens. */

.home { display: flex; flex-direction: column; gap: var(--space-7); }

/* ---- Hero ---- */
.hero {
  text-align: center;
  padding-block: var(--space-6) var(--space-7);
  border-block-end: 1px solid var(--outline-variant);
}
.bismillah-hero {
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.9;
  color: var(--primary);
  margin: 0 0 var(--space-5);
  /* The bismillah is centred as the page's anchor, so it must not inherit the reader's
     right-alignment; direction stays RTL for correct glyph order. */
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  max-inline-size: 20ch;
  margin-inline: auto;
  margin-block-end: var(--space-4);
}
.hero-sub {
  color: var(--on-surface-variant);
  max-inline-size: 56ch;
  margin-inline: auto;
  font-size: var(--step-0);
}

.hero-search {
  display: flex;
  gap: var(--space-2);
  max-inline-size: 40rem;
  margin: var(--space-6) auto var(--space-4);
}
.hero-search input {
  flex: 1;
  min-inline-size: 0;
  font: inherit;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.hero-search input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hero-search .btn-primary { flex: none; }

.hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5);
  margin: 0; font-size: var(--step--1); color: var(--on-surface-variant);
}
.hero-meta span { position: relative; }
.hero-meta span + span::before {
  content: "·"; position: absolute; inset-inline-start: calc(var(--space-5) / -2 - 2px);
  color: var(--outline);
}

/* ---- Today strip ---- */
.today-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--radius-lg);
}
.today-label { margin: 0; font-size: var(--step--1); opacity: 0.85; }
.today-value { margin: 0; font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.today-link { margin-inline-start: auto; color: inherit; font-weight: 600; font-size: var(--step--1); }

/* ---- Sections ---- */
.home-section > h2, .section-head h2 { margin-block: 0 var(--space-4); font-size: var(--step-2); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-4);
}
.section-head h2 { margin-block-end: 0; }
.section-more { font-size: var(--step--1); font-weight: 600; white-space: nowrap; }

/* ---- Surah tiles ---- */
.surah-tiles { list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.surah-tiles a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); block-size: 100%;
  border: 1px solid var(--outline-variant); border-radius: var(--radius);
  text-decoration: none; color: inherit; background: var(--surface-container-lowest);
  transition: border-color 0.15s, background 0.15s;
}
.surah-tiles a:hover { border-color: var(--primary); background: var(--surface-container-low); }
.tile-num {
  inline-size: 2rem; block-size: 2rem; display: grid; place-items: center; border-radius: 999px;
  background: var(--surface-container-high); color: var(--on-surface-variant);
  font-size: var(--step--1); font-variant-numeric: tabular-nums;
}
.tile-body { display: flex; flex-direction: column; min-inline-size: 0; }
.tile-ar { font-family: var(--font-arabic); font-size: 1.25rem; line-height: 1.6; }
.tile-latin, .tile-meta { font-size: var(--step--1); color: var(--on-surface-variant); }
.tile-meta { white-space: nowrap; }

/* ---- Feature grid ---- */
.feature-grid { list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.feature-grid a {
  display: flex; flex-direction: column; gap: var(--space-2); block-size: 100%;
  padding: var(--space-5); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit; background: var(--surface-container-lowest);
  transition: border-color 0.15s;
}
.feature-grid a:hover { border-color: var(--primary); }
.feature-grid h3 { margin: 0; font-size: var(--step-1); }
.feature-grid p { margin: 0; color: var(--on-surface-variant); font-size: var(--step--1); flex: 1; }
.feature-cta { font-size: var(--step--1); font-weight: 600; color: var(--primary); }

/* ---- Chips ---- */

/* ---- Learn row ---- */
.learn-row { list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.learn-row a {
  display: block; block-size: 100%; padding: var(--space-4);
  border-inline-start: 3px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-container-low); text-decoration: none; color: inherit;
}
.learn-row a:hover { background: var(--surface-container); }
.learn-row h3 { margin: 0 0 var(--space-2); font-size: var(--step-0); }
.learn-row p { margin: 0; font-size: var(--step--1); color: var(--on-surface-variant); }

/* ---- Intro prose ---- */
.home-intro p { max-inline-size: 70ch; color: var(--on-surface-variant);
  margin: 0 0 var(--space-3); }
.home-intro p:last-child { margin-bottom: 0; }

/* ---- Trust ---- */
.home-trust { padding: var(--space-5); background: var(--surface-container-low);
  border-radius: var(--radius-lg); }
.home-trust h2 { font-size: var(--step-1); }
.home-trust p { margin: 0; color: var(--on-surface-variant); font-size: var(--step--1);
  max-inline-size: 70ch; }

/* ---- Resume ---- */
.home-resume {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--primary); border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
}
.home-resume p { margin: 0; }
.home-resume .resume-title { font-weight: 600; }
.home-resume .resume-sub { font-size: var(--step--1); color: var(--on-surface-variant); }

@media (max-width: 34rem) {
  .hero-search { flex-direction: column; }
  .hero-search .btn-primary { inline-size: 100%; }
  .today-link { margin-inline-start: 0; }
}