/* =====================================================================
   TaDaA PROJECTS - sections.css
   ---------------------------------------------------------------------
   ADDED IN 1.0.2. The styling the home page was missing.

   The templates used class names (hero__grid, step__title, cta__inner
   and others) that were never written into base.css or components.css,
   so the hero, the "Draw. Make. Finish." band and the closing panel had
   no layout at all. Every value here was measured from the approved
   reference images (reference/desktop-1440.png, mobile-414.png and
   hero-1440.png) and reuses the theme's own variables, so the Customizer
   still controls colours, fonts and spacing.

   base.css and components.css are untouched. This file loads after them.

   Contents
     1. Hero
     2. "Made recently" and services: heading-row extras
     3. Services closing row
     4. Process band ("Draw. Make. Finish.")
     5. Closing call to action
     6. "Three ways in" cells: one column on phones
     7. Footer: menu columns, widget headings, bottom strip
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. HERO
   Dark panel. Copy on the left, robot arm on the right; on phones the
   arm moves underneath. Measurements from hero-1440.png.
   ------------------------------------------------------------------ */
.hero {
  padding-top: calc(var(--header-height) + clamp(36px, 8.1vw, 117px));
  padding-bottom: clamp(56px, 7vw, 100px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}

.hero__eyebrow { margin: 0; color: var(--color-ink-muted); }

/* "Design you / can hold." - two lines at every width (see hero.php). */
.hero__heading {
  margin-top: 22px;
  font-size: calc(clamp(44px, 7vw, 104px) * var(--heading-scale));
  line-height: 1.04;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-wrap: nowrap;
}
.hero__heading em {
  font-style: normal;
  color: var(--color-ink-muted);
}

.hero__description { margin-top: 36px; max-width: 400px; }
.hero__description p {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--ink-text-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.hero__actions .arw { margin-inline-start: 12px; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  max-width: 560px;
  margin: 38px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: var(--border-ink);
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.hero__fact { display: flex; gap: 10px; }

.hero__art { display: flex; justify-content: center; }
.hero__artwork {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-ink-text);
}
.hero__arm {
  display: block;
  width: clamp(260px, 33vw, 480px);
  max-width: 100%;
  height: auto;
}
.hero__caption {
  margin-top: 14px;
  font-size: 10.5px;
  letter-spacing: var(--label-spacing-wide);
  text-transform: uppercase;
  color: var(--ink-text-faint);
}

.hero .hero__scroll {
  position: absolute;
  right: var(--page-padding);
  bottom: 30px;
  display: none;
  align-items: center;
  gap: 14px;
  font-size: 10.5px;
  letter-spacing: var(--label-spacing-wide);
  text-transform: uppercase;
  color: var(--ink-text-faint);
}
.hero .hero__scroll::after {
  content: '';
  width: 56px;
  height: var(--border-width);
  background-color: currentColor;
  opacity: 0.6;
}
@media (min-width: 900px) {
  .hero .hero__scroll { display: flex; }
}

/* Phones: the two buttons share the row equally, as in mobile-414.png. */
@media (max-width: 599px) {
  .hero .hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero .hero__actions .button { padding-inline: 10px; white-space: nowrap; }
  .hero .hero__actions .arw { display: none; } /* as in mobile-414.png */
  .hero__arm { width: min(80vw, 340px); }
}


/* ---------------------------------------------------------------------
   2. HEADING-ROW EXTRAS
   On wide screens the short paragraph beside "Made recently." and
   "Bring the idea." sits flush right, with its link or note beneath.
   ------------------------------------------------------------------ */
.product-grid__aside,
.services__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
@media (min-width: 900px) {
  .product-grid__aside,
  .services__aside { align-items: flex-end; text-align: right; }
}
.services__aside { gap: 14px; }
.services__note {
  margin: 0;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Space between the filter buttons and the cards. */
.product-grid-section .filter-bar { margin-bottom: 40px; }

/* "See everything", centred under the grid. */
.product-grid__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
}

/* WooCommerce sale prices: the old price struck through and quiet,
   the new price plain - no link-style underline. */
.product-card__price ins { text-decoration: none; }
.product-card__price del {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-inline-end: 8px;
}


/* ---------------------------------------------------------------------
   3. SERVICES CLOSING ROW
   "Not sure which service you need?" on the left, button on the right,
   below its own hairline.
   ------------------------------------------------------------------ */
.services__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: var(--border-ink);
}
.services__closing .rte p {
  margin: 0;
  max-width: 500px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--color-ink-muted);
}


/* ---------------------------------------------------------------------
   4. PROCESS BAND
   Three columns on wide screens, stacked on phones. Each step: a line
   drawing, the number in walnut with a hairline running off it, the
   title and a short paragraph.
   ------------------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}
@media (min-width: 820px) {
  .steps {
    grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));
    gap: clamp(32px, 4vw, 58px);
  }
}
.step__art {
  display: block;
  margin-bottom: 18px;
  color: var(--color-text);
}
.step__key {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 30px;
}
/* The accent as 12px text - one of its allowed uses. */
.step__num {
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  color: var(--color-accent);
}
.step__rule {
  flex: 1;
  height: var(--border-width);
  background-color: var(--color-border);
}
.step__title { margin: 0 0 14px; }
.step__text p {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-soft);
}


/* ---------------------------------------------------------------------
   5. CLOSING CALL TO ACTION
   Centred on the dark panel: eyebrow, a three-line heading, a short
   paragraph and an email box with a white button.
   ------------------------------------------------------------------ */
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.cta__inner .eyebrow { color: var(--color-ink-muted); }
.cta__heading {
  margin-top: 26px;
  font-size: calc(clamp(40px, 5.6vw, 80px) * var(--heading-scale));
  line-height: 1.03;
  letter-spacing: -0.02em;
}
@media (min-width: 900px) {
  /* Narrow enough that it breaks "Have / something / in mind?". */
  .cta__heading { max-width: 6em; }
}
.cta__text { margin-top: 30px; max-width: 500px; }
.cta__text p {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.72;
  color: var(--ink-text-soft);
}

.cta__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 44px;
}
.cta__form .field {
  width: 348px;
  max-width: 100%;
  border-color: var(--line-on-ink);
  color: var(--color-ink-text);
  font-size: 14px;
}
.cta__form .field::placeholder { color: var(--ink-text-faint); }
.cta__form .field:focus { border-color: var(--color-ink-text); }
.cta__form .button { min-width: 160px; }
@media (max-width: 599px) {
  .cta__form .field { width: 100%; }
}
/* A contact-form plugin's own form, if a shortcode is used instead. */
.cta__plugin-form { width: 100%; margin-top: 44px; text-align: left; }


/* ---------------------------------------------------------------------
   6. "THREE WAYS IN" CELLS
   Three across on wide screens. On phones the reference squeezed all
   three into thin columns with one word per line - a bug - so they
   stack instead.
   ------------------------------------------------------------------ */
.line-grid--cells { grid-template-columns: repeat(var(--cells, 3), minmax(0, 1fr)); }
@media (max-width: 819px) {
  .line-grid--cells { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------
   7. FOOTER
   ------------------------------------------------------------------ */
.footer__col ul,
.footer__widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Widgets built from blocks print their own heading, ignoring the
   theme's wrapper; make it look like the other column headings. */
.footer__widget h2,
.footer__widget h3,
.footer__widget .wp-block-heading,
.footer__widget .wp-block-search__label {
  margin: 0 0 20px;
  font-family: var(--font-body-stack);
  font-size: var(--label-size);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--label-spacing-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.footer__widget + .footer__widget { margin-top: 32px; }
.footer__widget a {
  display: inline-block;
  padding: 6px 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
}
.footer__widget a:hover { color: var(--color-ink-text); }

.footer__links-inline { margin: 0; padding: 0; list-style: none; }
.footer__payment-card { height: 22px; width: auto; }


/* ---------------------------------------------------------------------
   8. PRODUCT CARDS IN THE HOME GRID  (added in 1.0.3)
   ------------------------------------------------------------------ */

/* FIXED BUG: the hover button ("Add to cart") overlapped the product name
   and price whenever the page had first opened in a narrow window and was
   then widened. Its position came from a measurement theme.js took only
   once. Here it is placed from the photo's own size instead: the photo is
   always 4:5, so its height is 125% of the card's width, and the card is
   a size container (cqw = 1% of the card's width). The button's bottom
   edge sits 14px above the photo's bottom edge, at every width, with no
   measuring. */
.product-grid .product-card { container-type: inline-size; }
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  .product-grid .product-card__action--overlay {
    top: calc(125cqw - 14px);
    bottom: auto;
    transform: translateY(calc(-100% + 12px));
  }
  .product-grid .product-card:hover .product-card__action--overlay,
  .product-grid .product-card__action--overlay:focus-within {
    transform: translateY(-100%);
  }
}

/* No photo yet: the grey tile with a line drawing, as in the approved
   design, instead of WooCommerce's generic placeholder picture. */
.product-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #e6e5e1 0%, #d6d4cf 100%);
  color: var(--color-text);
}
.product-card__placeholder svg {
  width: 48%;
  height: auto;
  transition: transform var(--speed-slow) var(--ease);
}
.product-card:hover .product-card__placeholder svg { transform: scale(1.04); }

/* Sold out: no button; a quiet ruled bar under the photo instead. */
.product-card__soldout {
  margin-top: 16px;
  padding: 13px 20px;
  border: var(--border);
  text-align: center;
  font-size: 11px;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}