/* CrochetSmith — homepage-only stylesheet (Phase 1 redesign).
   Loaded ONLY on "/" (see build.py's page('/', ..., extra_css=('home.css',))). Every selector below is
   scoped under .is-home or to class names that exist only inside the homepage markup, so nothing here can
   visually change any other page, even though the browser parses this file only on the homepage anyway. */

/* ================= HERO ================= */
.is-home .hero--cinematic {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--cs-ivory);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cs-beige);
}
.hero-media__poster,
.hero-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 46%;
}
.hero-media__video {
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.hero-media__video.is-playing { opacity: 1; }
/* The poster <img> is the real LCP element (fetchpriority high, never lazy); the video crossfades on top of
   it once it actually starts playing, so a slow or failed video load never leaves a blank area. */

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(247, 243, 234, 1) 0%,
    rgba(247, 243, 234, .98) 20%,
    rgba(247, 243, 234, .86) 37%,
    rgba(247, 243, 234, .46) 55%,
    rgba(247, 243, 234, .1) 73%,
    rgba(247, 243, 234, 0) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.75rem, 2.25rem + .9vw, 4rem) clamp(2.5rem, 1.75rem + 2vw, 4rem);
  display: flex;
  align-items: flex-start;
}
.hero-copy { max-width: 36rem; }
.hero-copy .eyebrow {
  font: 700 .78rem/1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cs-copper);
  margin: 0 0 1rem;
}
.hero-copy h1 {
  font-size: var(--fs-display);
  line-height: .96;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
  max-width: none; /* overrides components.css .hero h1's 9ch max-width, which assumed the old single-line layout */
}
.hero-copy h1 em { color: var(--cs-copper); font-style: normal; }
.hero-copy .lead { max-width: 34ch; margin-bottom: 1.75rem; }

.hero-search { margin-bottom: 1.25rem; }
.hero-search .field {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--cs-white);
  border: 1px solid var(--cs-line);
  border-radius: var(--radius);
  padding: .2rem .3rem .2rem 1rem;
  max-width: 30rem;
}
.hero-search input[type="search"] {
  flex: 1;
  border: 0;
  background: none;
  font: 500 .98rem/1.3 var(--font-ui);
  min-height: 46px;
  color: var(--cs-charcoal);
  border-radius: 2px;
}
.hero-search input[type="search"]:focus-visible {
  outline: 2px solid var(--cs-green);
  outline-offset: 2px;
}
.hero-search .field:focus-within { border-color: var(--cs-green); }
.hero-search .search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--cs-green);
  color: var(--cs-ivory);
  border: 0;
  flex: none;
  cursor: pointer;
}
.hero-search .search-submit .icon { width: 18px; height: 18px; }

/* Phase 1.2: "Popular searches" — a dedicated flex group sitting between the search field and the CTA
   buttons, with its own balanced margins (not inherited from .hero-search or .hero-actions) so the gap
   above and below it stays even regardless of either neighbor's spacing. */
.hero-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .85rem;
  margin: .9rem 0;
}
.hero-popular__label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font: 600 .82rem/1 var(--font-ui);
  color: var(--cs-green);
  white-space: nowrap;
}
.hero-popular__icon { width: 15px; height: 15px; flex: none; color: var(--cs-copper); stroke-width: 1.3; }
.hero-popular__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: 0;
}
.hero-popular__list a {
  display: inline-flex;
  align-items: center;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--cs-white);
  border: 1px solid var(--cs-sand);
  color: var(--cs-green);
  font: 600 .8rem/1 var(--font-ui);
  text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.hero-popular__list a:hover { background: var(--cs-beige); border-color: var(--cs-copper); }
.hero-popular__list a:focus-visible { outline: 2px solid var(--cs-green); outline-offset: 2px; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1.75rem; }
.btn--outline { background: transparent; color: var(--cs-green); border-color: var(--cs-green); }
.btn--outline:hover { background: var(--cs-green); color: var(--cs-ivory); }

.hero-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.5rem; max-width: 30rem; }
.hero-trust li { display: flex; align-items: center; gap: .55rem; font: 600 .82rem/1.25 var(--font-ui); color: var(--cs-ink-soft); }
.hero-trust .icon { width: 20px; height: 20px; flex: none; color: var(--cs-copper); }

/* Phase 1.1 refinement: a responsive 2:1 width-to-height hero on tablet/desktop (via aspect-ratio, not a
   fixed px height), capped so it never grows past a sensible height on very wide screens, with a smaller
   fixed top gap (~48-64px, set on .hero-inner above) between the header and the hero copy, and a smaller,
   tighter headline so "worth keeping." reads as a clean second line instead of wrapping to a third. */
@media (min-width: 901px) {
  .is-home .hero--cinematic { width: 100%; aspect-ratio: 2 / 1; min-height: 540px; max-height: 660px; }
  .hero-inner { height: 100%; }
  .hero-copy { max-width: 40rem; }
  .hero-copy .eyebrow { margin-bottom: .75rem; }
  .hero-copy h1 { font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem); line-height: .98; margin-bottom: .32em; }
  .hero-copy .lead { font-size: 1.05rem; line-height: 1.45; margin-bottom: 1.1rem; }
  .hero-search { margin-bottom: .85rem; }
  .hero-popular { margin: .85rem 0; }
  .hero-actions { margin-bottom: 1.1rem; }
  .hero-trust { gap: .6rem 1.25rem; }
  .hero-trust li { font-size: .78rem; }
  .hero-trust .icon { width: 18px; height: 18px; }
}

@media (max-width: 900px) {
  .hero-media__poster, .hero-media__video { object-position: 68% 50%; }
  .hero-scrim { background: linear-gradient(180deg,
      rgba(247, 243, 234, .97) 0%,
      rgba(247, 243, 234, .94) 46%,
      rgba(247, 243, 234, .55) 70%,
      rgba(247, 243, 234, .22) 100%); }
  .hero-inner { min-height: 0; padding-block: 2.25rem 2.75rem; align-items: flex-start; }
  .hero-copy { max-width: none; }
  .hero-copy .lead { max-width: none; }
  .hero-trust { grid-template-columns: 1fr; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media__video { display: none; }
}

/* ================= CATEGORY CARDS ================= */
.cat-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.cat-head .eyebrow { font: 700 .78rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cs-copper); margin: 0 0 .5rem; }
.cat-head h2 { margin: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 1.75rem); }
.cat-card { display: block; text-decoration: none; color: inherit; background: var(--cs-white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--cs-line-soft); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.cat-card:hover { border-color: var(--cs-copper); transform: translateY(-3px); }
.cat-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cs-beige); }
.cat-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat-card:hover figure img { transform: scale(1.04); }
.cat-card .cat-body { padding: 1.1rem 1.25rem 1.3rem; }
.cat-card h3 { font-size: 1.3rem; margin: 0 0 .3rem; }
.cat-card p { font-size: var(--fs-small); color: var(--cs-ink-soft); margin: 0 0 .6rem; }
.cat-card .link-arrow { font-size: .82rem; }

/* ================= FEATURED PATTERN ================= */
.is-home .feature .eyebrow { font: 700 .78rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cs-copper); margin: 0 0 .6rem; }

/* ================= LEARN STEPS ================= */
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); counter-reset: lesson; }
.steps-row li { counter-increment: lesson; position: relative; }
.steps-row a { display: block; text-decoration: none; color: inherit; }
.steps-row figure { margin: 0 0 .75rem; position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--cs-beige); }
.steps-row figure img { width: 100%; height: 100%; object-fit: cover; }
.steps-row .step-num { position: absolute; top: .5rem; left: .5rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--cs-green); color: var(--cs-ivory); font: 700 .85rem/1.8rem var(--font-ui); text-align: center; }
.steps-row h3 { font-size: .98rem; line-height: 1.3; margin: 0 0 .2rem; font-family: var(--font-ui); font-weight: 700; }
.steps-row .time { font-size: var(--fs-xs); color: var(--cs-ink-soft); }
.steps-row a:hover h3 { text-decoration: underline; text-decoration-color: var(--cs-copper); text-underline-offset: .18em; }

/* ================= YARN / TOOLS / REVIEWS CARDS ================= */
.know-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.know-card { display: block; text-decoration: none; color: inherit; }
.know-card figure { margin: 0 0 1rem; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--cs-beige); }
.know-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.know-card:hover figure img { transform: scale(1.04); }
.know-card h3 { font-size: 1.35rem; margin: 0 0 .35rem; }
.know-card p { font-size: var(--fs-small); color: var(--cs-ink-soft); margin: 0 0 .5rem; }
.know-card:hover h3 { text-decoration: underline; text-decoration-color: var(--cs-copper); text-underline-offset: .18em; }

/* ================= FAQ ================= */
.faq-list { list-style: none; margin: 0; padding: 0; max-width: 56rem; border-top: 1px solid var(--cs-line); }
.faq-item { border-bottom: 1px solid var(--cs-line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; cursor: pointer; font: 600 1.05rem/1.4 var(--font-ui); color: var(--cs-charcoal);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon { position: relative; width: 22px; height: 22px; flex: none; }
.faq-item summary .faq-icon::before, .faq-item summary .faq-icon::after {
  content: ""; position: absolute; background: var(--cs-green); border-radius: 2px; transition: transform .2s var(--ease);
}
.faq-item summary .faq-icon::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.faq-item summary .faq-icon::after { top: 2px; left: 10px; width: 2px; height: 18px; }
.faq-item[open] summary .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item .faq-a { margin: 0 0 1.4rem; max-width: 62ch; color: var(--cs-ink-soft); font-size: var(--fs-small); line-height: 1.65; }

/* ================= NEWSLETTER (homepage variant) ================= */
.nl-home { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.nl-home .container { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.nl-home figure { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.nl-home figure img { width: 100%; height: 100%; object-fit: cover; }
.nl-home .nl-points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.nl-home .nl-points li { display: flex; align-items: center; gap: .5rem; font: 600 .82rem/1.25 var(--font-ui); color: var(--cs-ivory-dim); }
.nl-home .nl-points .icon { width: 18px; height: 18px; flex: none; color: var(--cs-copper); }
@media (max-width: 760px) {
  .nl-home .container { grid-template-columns: 1fr; }
  .nl-home figure { max-width: 22rem; }
}

@media (max-width: 760px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .know-grid { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}