/* ============================================================
   GRILLY child theme — homepage patterns (step 10)
   ------------------------------------------------------------
   Every rule is scoped to a .g-home-* class set in the block
   editor ("Additional CSS class"). Values come from the mockup's
   PAGE PATTERNS block (grilly-fi-prototype.html), tokens from
   grilly-tokens.css. Loaded after grilly-components.css.
   ============================================================ */

/* ---------- 10.2 Hero — GRILLY / Hero ----------
   Editor structure (classes in brackets):
   Group, align full            [g-hero]
   └ Group                      [g-hero__card]
     └ Columns 55 / 45, gap 0
       ├ Column                 [g-hero__copy]
       │   Paragraph            [g-eyebrow]
       │   Heading H1           [g-display]
       │   Paragraph            [g-hero__lede]
       │   Buttons              [g-hero__cta]  → button 1 Fill, button 2 Outline
       └ Column                 [g-hero__media]
           Image (no caption, link none)
           Group                [g-hero__tag]
             Paragraph (bold) + Paragraph
*/

.g-hero {
  background: var(--g-cream);
  padding-block: var(--g-s7) var(--g-s5); /* tighter under the card, the USP bar follows */
}

/* the alignfull outer Group is edge to edge; the card itself sits in the
   1280 site container (Blocksy "Wide" does not constrain inner blocks) */
.g-hero__card {
  position: relative;
  max-width: var(--theme-normal-container-max-width, 1280px);
  margin-inline: auto;
  background: var(--g-char);
  border-radius: var(--g-r-xl);
  overflow: hidden;
  isolation: isolate;
}

/* Columns block: no inner gap, stretch both columns to the taller one */
.g-hero__card > .wp-block-columns {
  gap: 0;
  align-items: stretch;
  margin: 0;
}

/* --- copy column --- */
.g-hero__copy {
  padding: clamp(28px, 3.4vw, 60px);
  align-self: center;
  max-width: 720px;
}

.g-hero__copy .g-eyebrow {
  color: var(--g-on-dark);
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-hero__copy .g-eyebrow::before {
  content: "";
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--g-orange);
  flex: none;
}

.g-hero__copy h1 {
  font-size: clamp(36px, 4.6vw, 54px);
  letter-spacing: -.03em;
  line-height: 1.08;
  color: #fff;
  margin: 0;
}
.g-hero__copy h1 em {
  font-style: normal;
  color: var(--g-orange-dark);
}

.g-hero__lede {
  max-width: 46ch;
  color: #C9C1B2;
  font-size: 18px;
  line-height: 1.6;
  margin: var(--g-s5) 0 0;
}

/* --- CTA buttons (core Buttons block) --- */
.g-hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--g-s7);
}
.g-hero__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  border-radius: var(--g-r-pill);
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--g-ease), color var(--g-ease), border-color var(--g-ease);
}
/* button 1: Fill → orange, ink text (never white on orange) */
.g-hero__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--g-orange);
  color: var(--g-on-orange);
}
.g-hero__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--g-orange-600);
  color: #fff;
}
/* button 2: Outline → "on charcoal" ghost */
.g-hero__cta .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
.g-hero__cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .6);
}

/* --- media column --- */
.g-hero__media {
  position: relative;
  min-height: 440px;
}

.g-hero__media > .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
}
.g-hero__media > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%; /* floor and grills, not the ceiling lights */
  display: block;
}

/* soft fade from the image into the charcoal copy panel — CSS, not baked into the photo */
.g-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--g-char) 0%,
    rgba(43, 43, 43, .92) 12%,
    rgba(43, 43, 43, 0) 42%);
}

.g-hero__tag {
  position: absolute;
  right: var(--g-s6);
  bottom: var(--g-s6);
  z-index: 3;
  background: var(--g-cream);
  border-radius: var(--g-r-md);
  padding: 18px 20px;
  max-width: 290px;
  box-shadow: var(--g-sh-2);
}
.g-hero__tag p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--g-ink-2);
}
.g-hero__tag p:first-child {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--g-ink);
}
.g-hero__tag p + p {
  margin-top: 8px;
}

/* --- tablet + mobile: image on top, fade from the bottom, tag becomes static --- */
@media (max-width: 999.98px) {
  .g-hero { padding-block: var(--g-s5); }
  .g-hero__card > .wp-block-columns { flex-direction: column; }
  .g-hero__media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 10;
    flex-basis: auto !important; /* ignore the 45 % column width once stacked */
  }
  .g-hero__copy { flex-basis: auto !important; padding-top: var(--g-s5); }
  .g-hero__media::after {
    background: linear-gradient(0deg,
      var(--g-char) 0%,
      rgba(43, 43, 43, .9) 14%,
      rgba(43, 43, 43, 0) 55%);
  }
  .g-hero__tag {
    position: static;
    max-width: none;
    margin: var(--g-s5) var(--g-s5) 0;
    box-shadow: none;
  }
  /* on mobile the tag sits below the image inside the media column, so the
     column needs to grow past the aspect ratio */
  .g-hero__media:has(.g-hero__tag) { aspect-ratio: auto; }
  .g-hero__media:has(.g-hero__tag) > .wp-block-image {
    position: relative;
    aspect-ratio: 16 / 10;
  }
  .g-hero__media:has(.g-hero__tag)::after { display: none; }
}

/* ---------- 10.3 USP bar — GRILLY / USP Bar ----------
   Editor structure:
   Group, align full            [g-usp]
   └ Custom HTML                (home-usp-blocks.html: ul.g-usp__list > li)
*/

.g-usp {
  background: var(--g-surface);
  border-block: 1px solid var(--g-line);
  color: var(--g-ink-2);
}

.g-usp__list {
  list-style: none;
  margin: 0 auto;
  padding: var(--g-s5) var(--g-s5);
  max-width: var(--theme-normal-container-max-width, 1280px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--g-s5);
}
/* Blocksy Wide content: the container already has side padding; on narrow
   screens the list keeps its own so text never touches the edge */
.g-usp__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}
.g-usp__list svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--g-orange-ink);
  margin-top: 1px;
}
.g-usp__list b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink);
  margin-bottom: 2px;
}

@media (max-width: 689.98px) {
  .g-usp__list { grid-template-columns: 1fr 1fr; gap: var(--g-s4); }
}

/* ---------- shared: section shell + head (used by 10.4 onwards) ----------
   Group, align full            [g-section g-section--cream | --white | --char | --peach]
   └ Group                      [g-section__inner]
     ├ Group                    [g-section-head]
     │   Heading H2 (+ optional Paragraph under it)
     │   Paragraph → link       [g-link-more]
     └ … section content
*/
.g-section { padding-block: var(--g-section); }
.g-section--cream { background: var(--g-cream); }
.g-section--white { background: var(--g-surface); }
.g-section--char  { background: var(--g-char); color: var(--g-on-dark); }
.g-section--peach { background: var(--g-peach-soft); }

.g-section__inner {
  max-width: var(--theme-normal-container-max-width, 1280px);
  margin-inline: auto;
}

.g-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--g-s5);
  margin-bottom: var(--g-s6);
}
.g-section-head > * { margin: 0; }
.g-section-head h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.15;
  text-wrap: balance;
}
.g-section-head h2 + p {
  margin-top: var(--g-s2);
  color: var(--g-muted);
  font-size: 16px;
}
.g-section--char .g-section-head h2 { color: #fff; }
.g-section--char .g-section-head h2 + p { color: var(--g-on-dark-muted); }

.g-link-more,
.g-link-more a {
  font-weight: 700;
  font-size: 14px;
  color: var(--g-orange-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--g-orange);
  padding-bottom: 2px;
  white-space: nowrap;
}
.g-section--char .g-link-more a { color: var(--g-orange-dark); }

@media (max-width: 689.98px) {
  .g-section-head { flex-direction: column; align-items: flex-start; gap: var(--g-s3); }
  .g-section-head h2 { font-size: 24px; }
}

/* ---------- 10.4 Category grid — GRILLY / Category Grid ----------
   Shortcode block: [product_categories ids="…" orderby="include" columns="4" hide_empty="0"]
   Woo output: ul.products > li.product-category > a > img + h2 (mark.count)
   Blocksy styles ul.products as product cards; everything is reset here. */

.g-cats .products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-cats .products .product-category {
  margin: 0;
  padding: 0;
  width: auto;
  background: none;
  border: 0;
  box-shadow: none;
}
.g-cats .products .product-category > a {
  display: block;
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--g-ink);
  transition: border-color var(--g-ease), transform var(--g-ease), box-shadow var(--g-ease);
}
.g-cats .products .product-category > a:hover {
  border-color: var(--g-char);
  transform: translateY(-2px);
  box-shadow: var(--g-sh-2);
}
.g-cats .products .product-category img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  background: var(--g-surface-2);
}
.g-cats .products .product-category h2 {
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--g-ink);
  text-align: left;
  border-top: 1px solid var(--g-line);
}
.g-cats .products .product-category h2 .count { display: none; } /* "(91)" — count is noise on a nav card */

@media (max-width: 999.98px) {
  .g-cats .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 689.98px) {
  .g-cats .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-cats .products .product-category h2 { font-size: 14px; padding: 12px; }
}