/* ==========================================================================
   CHHAAP STUDIO - COMPONENTS (step 3)
   --------------------------------------------------------------------------
   Buttons, cards, product cards and the block-print motif system. Everything
   is built from the --chp-* tokens in ../style.css and this file loads after
   typography.css (see functions.php).

   Scope notes:
   * Class-based components are opt-in (.chp-*), so nothing here changes
     existing Blocksy output until we actually use the classes in patterns and
     templates.
   * The WooCommerce block near the bottom targets standard WooCommerce markup
     (ul.products li.product, .woocommerce-loop-product__title, .price,
     .onsale, .star-rating, .button) plus Blocksy's own media helper markup.
     Blocksy's full product-card templates are NOT part of the local partial
     copy of the parent theme, so those rules carry a VERIFY note: check the
     shop archive in a browser after the first deploy and adjust only what
     actually loses.
   * Deliberately NOT touched: the shop archive grid/column layout, which
     Blocksy already controls. Only the card's visual chrome is styled here.
   ========================================================================== */

/* ==========================================================================
   1. SECTION SHELLS AND LAYOUT HELPERS
   ========================================================================== */

.chp-container {
  width: 100%;
  max-width: var(--chp-container);
  margin-inline: auto;
  padding-inline: var(--chp-gutter);
}

.chp-container--wide { max-width: var(--chp-container-wide); }
.chp-container--narrow { max-width: var(--chp-container-narrow); }

.chp-section {
  padding-block: var(--chp-section-y);
  background-color: var(--chp-surface-alt);
  color: var(--chp-text);
}

.chp-section--tight { padding-block: var(--chp-section-y-tight); }
.chp-section--flush { padding-block: 0; }
.chp-section--surface { background-color: var(--chp-surface); }
.chp-section--tinted { background-color: var(--chp-surface-tint); }

.chp-section--dark {
  background-color: var(--chp-surface-dark);
  color: var(--chp-on-dark);
}

.chp-section--dark :is(h1, h2, h3, h4, h5, h6) { color: var(--chp-on-dark); }
.chp-section--dark a { color: var(--chp-on-dark); }
.chp-section--dark a:hover,
.chp-section--dark a:focus { color: var(--chp-accent-bright); }
.chp-section--dark p { color: var(--chp-on-dark); }

/* Eyebrow + heading + intro, used to open a section */
.chp-section-head {
  max-width: 46rem;
  margin-bottom: var(--chp-space-8);
}

.chp-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.chp-section-head p { color: var(--chp-text-muted); }

/* Auto-fitting grids - no media queries needed */
.chp-grid {
  display: grid;
  gap: var(--chp-grid-gap);
}

.chp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.chp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.chp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.chp-stack > * + * { margin-top: var(--chp-space-4); }

/* ==========================================================================
   2. UTILITIES
   ========================================================================== */

.chp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chp-hairline {
  margin-block: var(--chp-space-6);
  border: 0;
  border-top: var(--chp-border-hairline);
}

.chp-text-muted { color: var(--chp-text-muted); }
.chp-text-center { text-align: center; }
.chp-mt-0 { margin-top: 0; }
.chp-mb-0 { margin-bottom: 0; }
.chp-mb-4 { margin-bottom: var(--chp-space-4); }
.chp-mb-6 { margin-bottom: var(--chp-space-6); }

/* ==========================================================================
   3. BUTTONS
   --------------------------------------------------------------------------
   Solid ink primary; madder red on hover; outline for light-on-dark sections.
   Square-ish corners echo the carved block. Labels are already uppercase and
   letterspaced by typography.css.
   ========================================================================== */

.chp-btn {
  --chp-btn-bg: var(--chp-ink);
  --chp-btn-fg: var(--chp-on-dark);
  --chp-btn-bd: var(--chp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chp-space-2);
  padding: var(--chp-space-4) var(--chp-space-7);
  border: var(--chp-border-width) solid var(--chp-btn-bd);
  border-radius: var(--chp-radius-sm);
  background-color: var(--chp-btn-bg);
  color: var(--chp-btn-fg);
  font-family: var(--chp-font-body);
  font-size: var(--chp-fs-button);
  font-weight: var(--chp-weight-semibold);
  letter-spacing: var(--chp-tracking-button);
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--chp-transition),
    border-color var(--chp-transition),
    color var(--chp-transition);
}

.chp-btn:hover,
.chp-btn:focus-visible {
  --chp-btn-bg: var(--chp-accent);
  --chp-btn-bd: var(--chp-accent);
  --chp-btn-fg: var(--chp-surface);
  color: var(--chp-surface);
}

/* Accent (madder) call to action */
.chp-btn--accent {
  --chp-btn-bg: var(--chp-accent);
  --chp-btn-bd: var(--chp-accent);
  --chp-btn-fg: var(--chp-surface);
}

.chp-btn--accent:hover,
.chp-btn--accent:focus-visible {
  --chp-btn-bg: var(--chp-accent-bright);
  --chp-btn-bd: var(--chp-accent-bright);
}

/* Outline on light backgrounds */
.chp-btn--outline {
  --chp-btn-bg: transparent;
  --chp-btn-fg: var(--chp-ink);
  --chp-btn-bd: var(--chp-ink);
}

.chp-btn--outline:hover,
.chp-btn--outline:focus-visible {
  --chp-btn-bg: var(--chp-ink);
  --chp-btn-bd: var(--chp-ink);
  --chp-btn-fg: var(--chp-on-dark);
}

/* Outline on photography / dark sections (the reference kit's ghost button) */
.chp-btn--on-dark {
  --chp-btn-bg: transparent;
  --chp-btn-fg: var(--chp-on-dark);
  --chp-btn-bd: var(--chp-on-dark);
}

.chp-btn--on-dark:hover,
.chp-btn--on-dark:focus-visible {
  --chp-btn-bg: var(--chp-accent);
  --chp-btn-bd: var(--chp-accent);
  --chp-btn-fg: var(--chp-surface);
}

/* Text-only action, e.g. "View all" */
.chp-btn--link {
  --chp-btn-bg: transparent;
  --chp-btn-bd: transparent;
  --chp-btn-fg: var(--chp-accent);
  padding-inline: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.chp-btn--link:hover,
.chp-btn--link:focus-visible {
  --chp-btn-bg: transparent;
  --chp-btn-bd: transparent;
  --chp-btn-fg: var(--chp-accent-bright);
}

.chp-btn--sm {
  padding: var(--chp-space-3) var(--chp-space-5);
  font-size: var(--chp-fs-caption);
}

.chp-btn--lg {
  padding: var(--chp-space-5) var(--chp-space-8);
  font-size: var(--chp-fs-small);
}

.chp-btn--block { width: 100%; }

.chp-btn[disabled],
.chp-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   4. BADGES
   ========================================================================== */

.chp-badge {
  display: inline-block;
  padding: var(--chp-space-1) var(--chp-space-3);
  border-radius: var(--chp-radius-sm);
  background-color: var(--chp-ink);
  color: var(--chp-on-dark);
  font-family: var(--chp-font-body);
  font-size: var(--chp-fs-caption);
  font-weight: var(--chp-weight-semibold);
  letter-spacing: var(--chp-tracking-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

.chp-badge--sale { background-color: var(--chp-sale); color: var(--chp-surface); }
.chp-badge--new { background-color: var(--chp-mustard); color: var(--chp-ink); }
.chp-badge--muted { background-color: var(--chp-sand); color: var(--chp-ink); }

/* ==========================================================================
   5. CARDS
   ========================================================================== */

/* Base card: hairline border, no rounding beyond 2px, hover lifts to ink */
.chp-card {
  display: flex;
  flex-direction: column;
  background-color: var(--chp-surface);
  border: var(--chp-border-hairline);
  border-radius: var(--chp-radius-sm);
  overflow: hidden;
  transition:
    border-color var(--chp-transition),
    box-shadow var(--chp-transition);
}

.chp-card:hover {
  border-color: var(--chp-ink);
  box-shadow: var(--chp-shadow-md);
}

.chp-card__media {
  position: relative;
  aspect-ratio: var(--chp-ratio-card);
  background-color: var(--chp-sand);
  overflow: hidden;
}

.chp-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--chp-transition-slow);
}

.chp-card:hover .chp-card__media img { transform: scale(1.04); }

.chp-card--portrait .chp-card__media { aspect-ratio: var(--chp-ratio-product); }
.chp-card--landscape .chp-card__media { aspect-ratio: var(--chp-ratio-lifestyle); }

.chp-card__body { padding: var(--chp-space-5); }

.chp-card__title {
  margin: 0 0 var(--chp-space-2);
  font-family: var(--chp-font-display);
  font-size: var(--chp-fs-h4);
  line-height: var(--chp-lh-heading);
  color: var(--chp-ink);
}

.chp-card__title a { color: inherit; text-decoration: none; }
.chp-card__title a:hover { color: var(--chp-accent); }

.chp-card__meta {
  margin-bottom: var(--chp-space-3);
  font-size: var(--chp-fs-caption);
  letter-spacing: var(--chp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--chp-text-muted);
}

.chp-card__text {
  margin-bottom: var(--chp-space-4);
  color: var(--chp-text-muted);
}

.chp-card__footer {
  margin-top: auto;
  padding: 0 var(--chp-space-5) var(--chp-space-5);
}

/* Overlay card: text sits on the photograph, like the reference kit's
   category cards - a dark wash that deepens on hover, CTA revealed on hover
   or keyboard focus. */
.chp-card--overlay {
  position: relative;
  display: block;
  border: 0;
  background-color: var(--chp-ink);
}

.chp-card--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--chp-overlay);
  opacity: 0.85;
  transition: opacity var(--chp-transition);
  pointer-events: none;
}

.chp-card--overlay:hover::after { opacity: 1; }

.chp-card__overlay-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--chp-space-6) var(--chp-space-5);
  text-align: center;
  color: var(--chp-on-dark);
}

.chp-card__overlay-body :is(h2, h3, h4) {
  margin-bottom: var(--chp-space-3);
  color: var(--chp-on-dark);
}

.chp-card--overlay .chp-btn {
  opacity: 0;
  transform: translateY(var(--chp-space-2));
  transition:
    opacity var(--chp-transition),
    transform var(--chp-transition);
}

.chp-card--overlay:hover .chp-btn,
.chp-card--overlay:focus-within .chp-btn {
  opacity: 1;
  transform: none;
}

/* Feature item - the four-up trust strip */
.chp-feature {
  padding: var(--chp-space-5) var(--chp-space-4);
  text-align: center;
}

.chp-feature__icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--chp-space-3);
  color: var(--chp-accent);
}

.chp-feature__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.chp-feature__title {
  margin: 0 0 var(--chp-space-1);
  font-family: var(--chp-font-body);
  font-size: var(--chp-fs-small);
  font-weight: var(--chp-weight-semibold);
  letter-spacing: var(--chp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--chp-ink);
}

.chp-feature__text {
  margin: 0;
  font-size: var(--chp-fs-caption);
  color: var(--chp-text-muted);
}

/* Promo banner - full-bleed photo with text over it */
.chp-promo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 22rem;
  padding: var(--chp-space-8) var(--chp-space-6);
  background-color: var(--chp-ink);
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.chp-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--chp-overlay);
  opacity: 0.85;
  transition: opacity var(--chp-transition);
}

.chp-promo:hover::after { opacity: 1; }

.chp-promo__body {
  position: relative;
  z-index: 1;
  max-width: 26rem;
  color: var(--chp-on-dark);
}

.chp-promo__body :is(h2, h3) { color: var(--chp-on-dark); }
.chp-promo__body p { margin-bottom: var(--chp-space-5); color: var(--chp-on-dark); }

/* Pull quote / testimonial */
.chp-quote {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.chp-quote__mark {
  display: block;
  margin-bottom: var(--chp-space-4);
  font-family: var(--chp-font-display);
  font-size: var(--chp-fs-h2);
  line-height: 0.6;
  color: var(--chp-mustard);
}

.chp-quote__text {
  margin-bottom: var(--chp-space-5);
  font-family: var(--chp-font-display);
  font-size: var(--chp-fs-h3);
  line-height: var(--chp-lh-tight);
  color: var(--chp-ink);
}

.chp-quote__cite {
  display: block;
  font-family: var(--chp-font-body);
  font-size: var(--chp-fs-caption);
  font-style: normal;
  letter-spacing: var(--chp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--chp-text-muted);
}

.chp-stars {
  display: inline-block;
  color: var(--chp-mustard);
  letter-spacing: 0.15em;
}

/* ==========================================================================
   6. PRODUCT CARDS (WooCommerce) - VERIFY IN BROWSER
   --------------------------------------------------------------------------
   Chrome only: border, image ratio, typography, badges, buttons. The archive
   grid and column layout are left to Blocksy. Blocksy's full product-card
   templates are not part of the local partial copy of the parent theme, so
   confirm these selectors against the real shop archive after the first deploy
   and adjust only what actually loses.
   ========================================================================== */

.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 var(--chp-space-4);
  background-color: var(--chp-surface);
  border: var(--chp-border-hairline);
  border-radius: var(--chp-radius-sm);
  overflow: hidden;
  text-align: left;
  transition:
    border-color var(--chp-transition),
    box-shadow var(--chp-transition);
}

.woocommerce ul.products li.product:hover {
  border-color: var(--chp-ink);
  box-shadow: var(--chp-shadow-md);
}

/* Image: 4:5 portrait crop with a gentle zoom. Covers standard WooCommerce
   markup and Blocksy's media helper wrapper (.ct-media-container). */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .ct-media-container {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: var(--chp-ratio-product);
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--chp-transition-slow);
}

.woocommerce ul.products li.product .ct-media-container img {
  height: 100%;
  aspect-ratio: auto;
}

.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product:hover .ct-media-container img {
  transform: scale(1.04);
}

/* Title and price */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-title {
  padding: var(--chp-space-4) var(--chp-space-4) var(--chp-space-1);
  margin: 0;
  font-family: var(--chp-font-display);
  font-size: var(--chp-fs-h4);
  font-weight: var(--chp-weight-regular);
  line-height: var(--chp-lh-heading);
  color: var(--chp-ink);
}

.woocommerce ul.products li.product .price {
  display: block;
  padding: 0 var(--chp-space-4);
  margin: 0 0 var(--chp-space-3);
  font-family: var(--chp-font-body);
  font-size: var(--chp-fs-price);
  font-weight: var(--chp-weight-medium);
  color: var(--chp-ink);
}

.woocommerce ul.products li.product .price del {
  color: var(--chp-text-muted);
  opacity: 1;
}

.woocommerce ul.products li.product .price ins {
  color: var(--chp-accent);
  font-weight: var(--chp-weight-semibold);
  text-decoration: none;
}

/* Sale badge */
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale {
  position: absolute;
  top: var(--chp-space-3);
  left: var(--chp-space-3);
  z-index: 2;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: var(--chp-space-1) var(--chp-space-3);
  border-radius: var(--chp-radius-sm);
  background-color: var(--chp-sale);
  color: var(--chp-surface);
  font-family: var(--chp-font-body);
  font-size: var(--chp-fs-caption);
  font-weight: var(--chp-weight-semibold);
  letter-spacing: var(--chp-tracking-eyebrow);
  line-height: 1.6;
  text-transform: uppercase;
}

/* Ratings: Woo uses ::before for the empty track and span::before for stars */
.woocommerce .star-rating::before { color: var(--chp-border); }
.woocommerce .star-rating span::before { color: var(--chp-mustard); }

/* Add-to-cart and "added to cart" follow the button component */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: var(--chp-space-2) var(--chp-space-4) 0;
  padding: var(--chp-space-3) var(--chp-space-5);
  border: var(--chp-border-width) solid var(--chp-ink);
  border-radius: var(--chp-radius-sm);
  background-color: var(--chp-ink);
  color: var(--chp-on-dark);
  font-size: var(--chp-fs-button);
  font-weight: var(--chp-weight-semibold);
  letter-spacing: var(--chp-tracking-button);
  text-transform: uppercase;
  transition:
    background-color var(--chp-transition),
    border-color var(--chp-transition),
    color var(--chp-transition);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible,
.woocommerce ul.products li.product .added_to_cart:hover {
  background-color: var(--chp-accent);
  border-color: var(--chp-accent);
  color: var(--chp-surface);
}

.woocommerce ul.products li.product .button.loading { opacity: 0.7; }

/* Single product summary price uses the same voice as the cards */
.woocommerce div.product .summary .price {
  font-size: var(--chp-fs-h4);
  font-weight: var(--chp-weight-medium);
  color: var(--chp-ink);
}

/* ==========================================================================
   7. BLOCK-PRINT MOTIF SYSTEM
   --------------------------------------------------------------------------
   Three SVG tiles in ../images/motifs/ do the decorative work:
     buti-row.svg     - horizontal rule between sections
     scallop-edge.svg - block-print border trim
     jaali-grid.svg   - faint lattice texture behind a section
   The SVG fill is baked to --chp-ink (#1b2a4a); on dark sections the texture is
   inverted so it reads as a light tone.
   ========================================================================== */

.chp-motif-divider {
  --chp-divider-opacity: 0.5;
  display: block;
  height: var(--chp-motif-band);
  margin-block: var(--chp-space-8);
  border: 0;
  background-image: url("../images/motifs/buti-row.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto var(--chp-motif-band);
  opacity: var(--chp-divider-opacity);
}

.chp-motif-divider--scallop {
  --chp-divider-opacity: 0.6;
  background-image: url("../images/motifs/scallop-edge.svg");
  background-size: auto 100%;
}

.chp-motif-divider--hairline {
  height: 0;
  margin-block: var(--chp-space-6);
  border-top: var(--chp-border-hairline);
  background-image: none;
  opacity: 1;
}

/* Faint jaali texture. Apply to the section itself: the texture paints above
   the section background and below the content. */
.chp-motif-watermark {
  position: relative;
  isolation: isolate;
}

.chp-motif-watermark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/motifs/jaali-grid.svg");
  background-repeat: repeat;
  background-size: calc(var(--chp-motif-band) * 4) auto;
  opacity: var(--chp-motif-opacity);
  pointer-events: none;
}

/* Ink motifs are invisible on ink backgrounds - flip them to the light tone */
.chp-section--dark .chp-motif-watermark::before { filter: invert(1); }

/* ==========================================================================
   8. RESPONSIVE (breakpoints mirror the parent theme.json)
   ========================================================================== */

@media (max-width: 999.98px) {
  .chp-promo { min-height: 19rem; }
}

@media (max-width: 689.98px) {
  .chp-section { padding-block: var(--chp-section-y-tight); }
  .chp-promo { min-height: 16rem; padding: var(--chp-space-6) var(--chp-space-5); }
  .chp-motif-divider { margin-block: var(--chp-space-6); }
  .chp-card__overlay-body { padding: var(--chp-space-5) var(--chp-space-4); }
  /* Hover-revealed CTAs must stay visible on touch devices */
  .chp-card--overlay .chp-btn { opacity: 1; transform: none; }
}

/* The global prefers-reduced-motion reset lives in typography.css. */

/* ==========================================================================
   9. BLOCK-CONTEXT BRIDGES (for the section patterns in /patterns)
   --------------------------------------------------------------------------
   The patterns are built from core blocks, so a few component classes have to
   work on block wrappers instead of on plain elements. Nothing here affects
   non-block markup.
   ========================================================================== */

/* Core Button block: the .chp-btn class lands on the block wrapper (which is
   where the variant custom properties live) and paints the inner link, because
   the link is what renders as the button. Custom properties inherit, so hover
   states defined on the wrapper still reach the link. */
.wp-block-button.chp-btn {
  padding: 0;
  border: 0;
  background: none;
}

.wp-block-button.chp-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chp-space-2);
  padding: var(--chp-space-4) var(--chp-space-7);
  border: var(--chp-border-width) solid var(--chp-btn-bd);
  border-radius: var(--chp-radius-sm);
  background-color: var(--chp-btn-bg);
  color: var(--chp-btn-fg);
  font-family: var(--chp-font-body);
  font-size: var(--chp-fs-button);
  font-weight: var(--chp-weight-semibold);
  letter-spacing: var(--chp-tracking-button);
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
}

.wp-block-button.chp-btn--sm .wp-block-button__link {
  padding: var(--chp-space-3) var(--chp-space-5);
  font-size: var(--chp-fs-caption);
}

.wp-block-button.chp-btn--lg .wp-block-button__link {
  padding: var(--chp-space-5) var(--chp-space-8);
  font-size: var(--chp-fs-small);
}

/* The text-link variant needs its underline back, because the bridge above
   removes the default decoration from every .chp-btn link. */
.wp-block-button.chp-btn--link .wp-block-button__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* Cards placed inside core columns stretch to equal heights, so the card
   footer sits flush at the bottom of the tallest card in the row. */
.wp-block-column > .wp-block-group.chp-card {
  height: 100%;
}

/* Media placeholders: keep the ratio and crop whatever image is added inside
   later, including WP's own figure wrapper. */
.chp-card__media > figure,
.chp-card__media .wp-block-image {
  height: 100%;
  margin: 0;
}

/* Section shells rendered as core groups should not add WP's own block gap
   between the container and its children. */
.wp-block-group.chp-section > .wp-block-group.chp-container > * + * {
  margin-block-start: 0;
}