/*
 * Commerce Starter — homepage.css
 *
 * Owns homepage-specific presentation that is genuinely shared across
 * structural skins: the homepage section-wrapper shell, the neutral hero
 * pattern's base layout, and the homepage-specific WooCommerce product/
 * category grid mechanics used by New Arrivals, Bestsellers and Shop by
 * Category. It does not own any structural skin's specific geometry --
 * exact pixel measurements matching one skin's approved design (for
 * example the Modern Indian Fashion hero's 45/55 split, or its 72px/64px
 * section padding) belong in that skin's own assets/css/skin.css, not
 * here. See docs/PARENT-NEUTRALIZATION-AND-MODERN-INDIAN-EXTRACTION.md for
 * the extraction that produced this module from the previous single-skin
 * version of this file, and docs/PRESENTATION-LAYER-CSS-OWNERSHIP.md for
 * the module ownership model.
 *
 * Loads after components.css so every homepage-scoped rule below wins the
 * cascade for its homepage context.
 */

/* Shared homepage section-wrapper max-width padding. */
.cs-home-surface,
.cs-product-section,
.cs-stories,
.cs-social {
  padding-inline: max(clamp(1rem, 4vw, 4rem), calc((100vw - 1280px) / 2));
}

.cs-product-section--tinted,
.cs-stories {
  background: var(--wp--custom--surface--subtle);
  box-shadow: 0 0 0 100vmax var(--wp--custom--surface--subtle);
  clip-path: inset(0 -100vmax);
}

/* Hero: neutral structural default. A structural child skin overrides this
 * pattern's own theme.json tokens and (if it wants different geometry than
 * this flexible default) supplies its own .cs-home-scoped corrections in
 * its own skin.css -- see docs/PARENT-NEUTRALIZATION-AND-MODERN-INDIAN-
 * EXTRACTION.md section 5.1 for why this base rule intentionally carries
 * no !important: the hero pattern no longer serializes an inline width,
 * padding or min-height block attribute for a skin to fight. */
.cs-hero {
  margin: 0;
  min-height: min(74vh, 760px);
}

.cs-hero__copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.cs-hero__copy h1 {
  font-size: clamp(3rem, 5.3vw, 5.25rem);
  letter-spacing: -0.025em;
  max-width: 10ch;
}

.cs-hero__copy > p:not(:first-child) {
  max-width: 34rem;
}

.cs-hero__actions {
  gap: 1rem;
  margin-top: .75rem;
}

/* A two-column hero is cramped below desktop width; stacking it at tablet
 * and mobile is a generic responsive principle, not skin-specific -- the
 * approved Modern Indian Fashion hero also stacks at both bands (see
 * docs/CLAUDE-DESIGN-IMPLEMENTATION.md's homepage geometry table), it
 * just does so with its own exact measurements in its own skin.css. */
@media (max-width: 1024px) {
  .cs-hero {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
  }

  .cs-hero__media,
  .cs-hero__copy {
    flex-basis: auto;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-image-placeholder--hero {
    min-height: min(50vh, 28rem);
  }
}

@media (max-width: 767px) {
  .cs-image-placeholder--hero {
    min-height: min(68vh, 34rem);
  }

  .cs-hero__copy {
    padding: 2.25rem 1.25rem 3rem;
  }

  .cs-hero__copy h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }
}

/* Homepage sections: shared shell. Skins may add their own .cs-home-scoped
 * exact geometry in their own skin.css; this default relies on the
 * flexible clamp() already declared for .cs-home-section in
 * components.css. */
.cs-home .cs-home-section > * {
  margin-inline: 0;
  max-width: none;
  width: 100%;
}

/* Product cards as used on the homepage (New Arrivals, Bestsellers,
 * Categories) -- the homepage-specific grid mechanics genuinely shared
 * across structural skins. A skin that wants different card spacing,
 * typography or borders overrides these same selectors in its own
 * skin.css; this module supplies only the reusable primitive. */
.cs-home-categories .woocommerce ul.products li.product-category {
  background: transparent;
  text-align: center;
}

.cs-home-categories .woocommerce-loop-category__title {
  font-family: var(--wp--preset--font-family--interface);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.35;
}

.cs-home-categories mark {
  display: none;
}

.cs-home .woocommerce ul.products li.product {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--custom--border--subtle);
  display: flex;
  flex-direction: column;
  float: none;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  width: auto;
}

.cs-home .woocommerce ul.products li.product img {
  aspect-ratio: 4 / 5;
  margin: 0;
  object-fit: cover;
  width: 100%;
}

.cs-home .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--interface);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  padding: 14px 12px 0;
}

.cs-home .woocommerce ul.products li.product .price {
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  margin: 8px 12px 14px;
}

.cs-home .woocommerce ul.products li.product .button {
  margin-top: auto;
  margin-inline: 0.75rem;
  margin-bottom: 1rem;
  display: none;
}

.cs-home .woocommerce-loop-category__title {
  font-size: 14px;
  margin-top: 12px;
  text-align: center;
}

.cs-home .woocommerce ul.products {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2rem 0 0;
  width: 100%;
}

.cs-home .woocommerce ul.products::before,
.cs-home .woocommerce ul.products::after {
  display: none;
}

@media (min-width: 1025px) {
  .cs-home .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs-home .woocommerce ul.products li.product,
.cs-home .woocommerce ul.products li.product-category {
  border: 1px solid var(--wp--custom--border--subtle);
  box-sizing: border-box;
}

.cs-home .woocommerce ul.products li.product-category {
  border: 0;
}

.cs-home .woocommerce ul.products li.product img,
.cs-home .woocommerce ul.products li.product-category img {
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 1025px) {
  .cs-home .woocommerce ul.products li.product img {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .cs-home .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px;
    padding: 10px 8px 0;
  }

  .cs-home .woocommerce ul.products li.product .price {
    font-size: 13px;
    margin: 6px 8px 10px;
  }
}

/* Trust strip: neutral structural default. A skin that wants exact
 * homepage padding/type geometry adds its own .cs-home-scoped correction
 * in its own skin.css. */
.cs-trust-strip {
  background: var(--wp--preset--color--white);
  border-block: 1px solid var(--wp--custom--border--subtle);
  padding: 2rem clamp(1rem, 4vw, 4rem);
}

.cs-trust-strip .wp-block-columns {
  margin: 0 auto;
  max-width: 1280px;
}

.cs-trust-strip .wp-block-column {
  text-align: center;
}

.cs-trust-strip strong,
.cs-trust-strip span {
  display: block;
}

.cs-trust-strip strong {
  font-size: .9rem;
}

.cs-trust-strip span {
  color: var(--wp--preset--color--muted);
  font-size: .78rem;
  margin-top: .25rem;
}

@media (max-width: 767px) {
  .cs-trust-strip .wp-block-columns {
    display: grid;
    gap: 1.75rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .cs-footer {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Newsletter (commerce-starter/newsletter-action block; base component
 * styling lives in components.css). A skin that wants exact homepage
 * placement geometry adds its own .cs-home-scoped correction in its own
 * skin.css. */

/*
 * Legacy persisted-content compatibility.
 * Earlier Commerce Starter versions serialized these classes into templates,
 * template parts and inserted pattern content. Retain until Site Readiness and
 * an approved migration path can prove that stored legacy markup is absent or
 * has been migrated.
 *
 * These are NOT current canonical selectors. The Modern Indian Fashion
 * structural skin's own featured-campaign markup (commerce-starter-modern-
 * indian/patterns/featured-campaign.php) uses .cs-reference-campaign*, in
 * that child theme's own skin.css; these .cs-campaign* rules exist only so
 * that a site whose database still contains this earlier featured-campaign
 * markup (pattern content copied into a page before this class name
 * changed) does not lose its layout and responsive styling after
 * upgrading. Do not add .cs-campaign* to any current template, template
 * part or pattern, and do not merge these declarations with
 * .cs-reference-campaign* -- their equivalence has not been established
 * and either family could change independently in the future.
 *
 * This family remains in the PARENT regardless of which structural skin
 * owns the current canonical featured-campaign presentation: it protects
 * persisted data on an already-provisioned site, which continues running
 * the parent theme independent of whether a Modern Indian child theme is
 * installed or activated on that site. See docs/PARENT-NEUTRALIZATION-AND-
 * MODERN-INDIAN-EXTRACTION.md section 5.4 for the full reasoning -- do not
 * move this block to any child theme.
 *
 * This block is deliberately positioned where the true pre-refactor
 * cascade placed it (style.css, source of .cs-campaign*, before
 * storefront-reference.css, source of .cs-reference-campaign*), so any
 * real element that happened to match both a legacy and a live selector
 * keeps resolving the same way. Do not move this block relative to any
 * other rule in this file -- see scripts/check-presentation-css-parity.mjs.
 *
 * Values below are byte-identical to the resolved baseline cascade at
 * commit 6ffc04a7664c4c863a384207f9b72e073b1069ce.
 */
.cs-campaign {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, .85fr);
}

.cs-campaign__media {
  min-height: clamp(22rem, 46vw, 40rem);
}

.cs-campaign__copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
}

.cs-campaign__copy h2 {
  font-size: clamp(2.25rem, 4vw, 3.75rem);
}

@media (max-width: 767px) {
  .cs-campaign {
    grid-template-columns: 1fr;
  }

  .cs-campaign__media {
    min-height: 25rem;
  }

  .cs-campaign__copy {
    padding: 2rem 1.25rem 3rem;
  }
}

/* Shop by occasion / social gallery: shared placeholder tile mechanics.
 * The occasion tile grid is owned entirely by the Modern Indian Fashion
 * structural skin (see docs/PARENT-NEUTRALIZATION-AND-MODERN-INDIAN-
 * EXTRACTION.md section 6.4 -- this parent registers no
 * commerce-starter/shop-by-occasion pattern at all). The social gallery
 * pattern keeps a thin neutral fallback in this parent, so its generic
 * placeholder-tile aspect ratio and grid mechanics stay here. */
.cs-social__grid {
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: 2rem;
}

.cs-social__grid .wp-block-column {
  align-items: center;
  aspect-ratio: 1;
  background: var(--wp--custom--surface--subtle);
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .cs-social__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Customer stories. */
.cs-stories .cs-card-row {
  gap: 1rem;
}

.cs-stories .wp-block-quote {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--custom--border--subtle);
  margin: 0;
  min-height: 100%;
  padding: 1.5rem;
  text-align: center;
}

/* An independent review (L6 in the PR #11 review) suggested this
 * selector's flex-basis could safely drop !important because it ties
 * WordPress core's `.wp-block-columns:not(.is-not-stacked-on-mobile) >
 * .wp-block-column` on specificity (both 0,3,0) and wins via later
 * source order. Live Chrome DevTools Protocol measurement at 390px
 * disproved that: WordPress core's own narrow-viewport mobile-stacking
 * media query (just below this project's 768px mobile/tablet boundary)
 * ALSO applies `flex-basis: 100% !important` to the same rule there, so
 * it wins outright regardless of specificity or source order once this
 * declaration is not itself !important -- confirmed computed flex-basis
 * was 100%, not the intended 82%, with !important removed. This mirrors
 * the same class of regression as the hero/editorial-story fix
 * (docs/PARENT-NEUTRALIZATION-AND-MODERN-INDIAN-EXTRACTION.md), not a
 * genuine specificity tie -- !important is restored below, re-measured,
 * and confirmed to render 82% again. */
@media (max-width: 767px) {
  .cs-stories .cs-card-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .cs-stories .cs-card-row > .wp-block-column {
    flex-basis: 82% !important;
    min-width: 82%;
    scroll-snap-align: start;
  }
}