/* ============================================================
   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-edge);
  max-width: calc(var(--theme-normal-container-max-width, 1280px) + 2 * var(--g-edge));
  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); }
}

/* Sections sit edge to edge — kill the editor's block gap between them */
.g-hero, .g-usp, .g-section { margin-block: 0 !important; }

/* alignfull groups leave Blocksy's container padding behind, so every
   section carries its own edge spacing; content stays 1280 wide inside it */
:root { --g-edge: clamp(16px, 4vw, 32px); }
.g-hero { padding-inline: var(--g-edge); }
.g-section__inner {
  max-width: calc(var(--theme-normal-container-max-width, 1280px) + 2 * var(--g-edge));
  padding-inline: var(--g-edge);
}

/* ---------- 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 .wp-block-group > * { margin: 0; } /* heading + subtitle wrapper: no block gap */
.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: [grilly_categories ids="…"]  (inc/grilly-home.php)
   Output: ul.g-cats__grid > li > a > img + span.g-cats__name */

.g-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-cats__grid li { margin: 0; }
.g-cats__grid 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__grid a:hover {
  border-color: var(--g-char);
  transform: translateY(-2px);
  box-shadow: var(--g-sh-2);
}
.g-cats__grid img,
.g-cats__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  background: var(--g-surface-2);
}
.g-cats__name {
  display: block;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  border-top: 1px solid var(--g-line);
}

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

/* ---------- 10.6 Editorial split — GRILLY / Editorial Split (equipment) ----------
   Group, align full            [g-section g-section--char g-edit]
   └ Group                      [g-section__inner]
     └ Columns 50/50
       ├ Column                 [g-edit__copy]
       │   Paragraph            [g-eyebrow]
       │   Heading H2
       │   Paragraph            [g-edit__lede]
       │   Custom HTML          dl.g-specstrip
       │   Buttons              [g-edit__cta]  (Fill + Outline, same styles as hero)
       └ Column                 [g-edit__media]
           Image
*/
.g-edit .wp-block-columns { gap: var(--g-s8); align-items: center; margin: 0; }
.g-edit .g-eyebrow { color: var(--g-peach); }
.g-edit h2 {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.g-edit__lede { color: #D8D2C4; max-width: 52ch; font-size: 17px; line-height: 1.6; margin: var(--g-s4) 0 var(--g-s6); }

.g-specstrip {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: #413D37; border: 1px solid #413D37;
  border-radius: var(--g-r-md); overflow: hidden;
  margin: 0 0 var(--g-s6);
}
.g-specstrip div { flex: 1 1 120px; background: var(--g-char); padding: 12px 14px; }
.g-specstrip dt { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #A79E8E; margin: 0 0 4px; }
.g-specstrip dd { margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
.g-specstrip .num { font-variant-numeric: tabular-nums; }

/* CTA: reuse hero button styles */
.g-edit__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.g-edit__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: 14px 24px; font-size: 15px; 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);
}
.g-edit__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--g-orange); color: var(--g-on-orange); }
.g-edit__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--g-orange-600); color: #fff; }
.g-edit__cta .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.g-edit__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); }

.g-edit__media .wp-block-image { margin: 0; }
.g-edit__media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--g-r-xl); border: 1px solid #4A453E;
}

@media (max-width: 999.98px) {
  .g-edit .wp-block-columns { flex-direction: column; gap: var(--g-s6); }
  .g-edit .wp-block-column { flex-basis: auto !important; }
  .g-edit__media { order: -1; }
}

/* ---------- 10.7 Brand row — GRILLY / Brand Showcase ----------
   Group, align full            [g-section g-section--white g-brands]
   └ Group                      [g-section__inner]
     ├ Group                    [g-section-head]  (H2 + subtitle, link)
     └ Shortcode                [grilly_brands]  → div.g-brandrow > a
   Text wordmarks in a 1px grid; no logos. */
.g-brandrow {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 12 brands = 6 × 2, no empty cells */
  gap: 1px;
  background: var(--g-line);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
  overflow: hidden;
}
.g-brandrow a {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: var(--g-s5) var(--g-s4);
  background: var(--g-surface);
  color: var(--g-ink-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background var(--g-ease), color var(--g-ease);
}
.g-brandrow a:hover { background: var(--g-cream); color: var(--g-orange-ink); }
@media (max-width: 999.98px) {
  .g-brandrow { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 689.98px) {
  .g-brandrow { grid-template-columns: repeat(2, 1fr); }
  .g-brandrow a { min-height: 64px; font-size: 12px; letter-spacing: .1em; }
}

/* ---------- 10.2 Content pages (Delivery, Returns, FAQ, T&C, Privacy…) ----------
   Narrow-width pages; classes set in the block markup. */
.g-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--g-ink-2);
  margin-bottom: var(--g-s6);
}
/* content-page headings: clearly below the page title (H1 ≈ 40px in Customizer) */
body.page .entry-content h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; margin-top: var(--g-s7); }
body.page .entry-content h3 { font-size: 20px; margin-top: var(--g-s6); }

/* Contact Form 7 (withdrawal form) */
.entry-content .wpcf7 label { display: block; font-weight: 600; font-size: 14px; margin-bottom: var(--g-s4); }
.entry-content .wpcf7 input[type="text"], .entry-content .wpcf7 input[type="email"], .entry-content .wpcf7 textarea { display: block; width: 100%; margin-top: 6px; font-weight: 400; }
.entry-content .wpcf7 textarea { min-height: 96px; }
.entry-content .wpcf7 textarea[name="goods"] { min-height: 120px; }
.entry-content .wpcf7-acceptance label { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; }
.entry-content .wpcf7-acceptance input { margin-top: 4px; }
.entry-content h2 + p, .entry-content h2 + ul, .entry-content h2 + figure { margin-top: var(--g-s3); }

.g-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid var(--g-line); }
.g-table th { background: var(--g-surface); font-weight: 600; }
.g-table td:last-child, .g-table th:last-child { white-space: nowrap; }
@media (max-width: 689.98px) {
  .g-table { overflow-x: auto; }
  .g-table table { font-size: 14px; }
  .g-table th, .g-table td { padding: 10px 10px; }
}

/* Yoast FAQ block: room between questions, question as a real heading */
.schema-faq-section { padding: var(--g-s4) 0; border-top: 1px solid var(--g-line); }
.schema-faq-section:first-child { border-top: 0; padding-top: 0; }
.schema-faq-question { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--g-ink); margin-bottom: 6px; }
.schema-faq-answer { margin: 0; }

/* Withdrawal form block in the T&C page */
.g-form {
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
  padding: var(--g-s5);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Content box: cream page, white content container ----------
   Everything except the homepage (which has its own full-width sections)
   sits in a white box on the cream site background. Blocksy 2 has no
   "Boxed" content-area option for archives any more, so this is CSS. */
body:not(.home) #main > .ct-container,
body:not(.home) #main > .ct-container-narrow {
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
  padding: clamp(24px, 3vw, 48px);
  box-sizing: border-box;
}
/* keep the sidebar gap sensible inside the box */
body:not(.home) #main > .ct-container[data-sidebar] { column-gap: var(--g-s7); }
@media (max-width: 689.98px) {
  body:not(.home) #main > .ct-container,
  body:not(.home) #main > .ct-container-narrow { padding: 16px; border-radius: 12px; }
}