/* AshAra Phase 3 homepage. Loads after tokens/base/components/shell. */

.home-section { padding-block: var(--space-7); }
.home-section__head { margin-bottom: var(--space-5); }
.home-section__eyebrow { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ash-brass-deep); }
.home-section__lead { color: var(--color-text-muted); max-width: 60ch; }

/* ---------- Hero ---------- */
.home-hero { padding-block: var(--space-7) var(--space-8); }
.home-hero__inner { display: grid; gap: var(--space-6); align-items: center; }
.home-hero__title { font-size: var(--fs-2xl); line-height: var(--line-tight); }
.home-hero__sub { color: var(--color-text-muted); font-size: var(--fs-lg); max-width: 46ch; margin-block: var(--space-3) var(--space-5); }
.home-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.home-hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-surface-raised); }
.home-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) { .home-hero__inner { grid-template-columns: 1.1fr 0.9fr; } }

/* ---------- Rent vs buy ---------- */
.home-rentbuy__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .home-rentbuy__grid { grid-template-columns: 1fr 1fr; } }
.home-rentbuy__card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--color-surface); display: grid; gap: var(--space-2); }
.home-rentbuy__card h3 { font-size: var(--fs-lg); }
.home-rentbuy__card ul { padding-inline-start: var(--space-4); color: var(--color-text-muted); display: grid; gap: var(--space-1); }

/* ---------- Featured / plans grids ---------- */
.home-featured__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .home-featured__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .home-featured__grid { grid-template-columns: repeat(4, 1fr); } }
.home-featured__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.home-skeleton-card { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); }

.home-plans__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .home-plans__grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--color-surface); display: grid; gap: var(--space-2); }
.plan-card__name { font-size: var(--fs-lg); }
.plan-card__price { display: flex; align-items: baseline; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.plan-card__price .price__amount { font-size: var(--fs-xl); }
.plan-card__features { padding-inline-start: var(--space-4); color: var(--color-text-muted); display: grid; gap: var(--space-1); }

/* ---------- Occasions ---------- */
.home-occasions__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .home-occasions__grid { grid-template-columns: repeat(3, 1fr); } }
.home-occasion { display: block; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-raised); border: var(--border-width) solid var(--color-border); text-decoration: none; color: var(--color-text); font-family: var(--font-serif); font-size: var(--fs-md); min-height: var(--touch-min); }
.home-occasion:hover { box-shadow: var(--shadow-sm); }

/* ---------- How it works ---------- */
.home-how__steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .home-how__steps { grid-template-columns: repeat(2, 1fr); } }
.home-how__step { counter-increment: step; position: relative; padding-inline-start: var(--space-7); }
.home-how__step::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--ash-brass-deep); color: #fff; font-weight: 700; }

/* ---------- Quality / sustainability / partner ---------- */
.home-band { background: var(--color-surface-raised); border-radius: var(--radius-lg); padding: var(--space-6); }
.home-band ul { padding-inline-start: var(--space-4); color: var(--color-text-muted); display: grid; gap: var(--space-1); }
.home-partner { display: grid; gap: var(--space-3); justify-items: start; }

/* ---------- FAQ ---------- */
.home-faq__list { display: grid; gap: var(--space-2); }
.home-faq__item { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.home-faq__item > summary { cursor: pointer; padding: var(--space-4); font-weight: 600; min-height: var(--touch-min); list-style: none; }
.home-faq__item > summary::-webkit-details-marker { display: none; }
.home-faq__item > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.home-faq__item[open] > summary { border-bottom: var(--border-width) solid var(--color-border); }
.home-faq__answer { padding: var(--space-4); color: var(--color-text-muted); }