/* =========================================================================
   GETU Shopping — homepage sections (2026-11-06), WordPress build (build-homepage-wp.mjs)
   Loaded only on the front page (novamira-sandbox/getu-home-sections.php).
   1. "Descubra nossas categorias" (Bricks element hpcats) — from assets/css/home-categorias.css
   2. B2B block photo (hpb2b) and the launch section's bottom padding (hplanc → hpprod order)
      — from the inline homepage style of index.html
   ========================================================================= */
.gc {
  --gc-card: #FBF4ED;
  --gc-line: rgba(110, 26, 42, .10);
  --gc-title: #5A1320;          /* wine-700 */
  --gc-action: #6E1A2A;         /* wine-600 */
  --gc-action-hover: #5A1320;   /* wine-700 */
  --gc-ink: #2A1A1C;
  --gc-text: rgba(36, 16, 21, .84);
  --gc-muted: rgba(36, 16, 21, .58);
  --gc-shadow: 0 1px 2px rgba(42, 14, 20, .04), 0 8px 24px rgba(42, 14, 20, .06);
  --gc-shadow-hover: 0 2px 4px rgba(42, 14, 20, .05), 0 16px 36px rgba(42, 14, 20, .10);
  --gc-radius: 18px;
  --gc-ease: cubic-bezier(.16, 1, .3, 1);
  /* the page's own warm cream (as in the mockup): no separate band, so no seam with the carousel above */
  padding-block: 56px 64px;
}
@media (min-width: 768px) { .gc { padding-block: 80px 88px; } }
@media (min-width: 1024px) { .gc { padding-block: 96px 104px; } }

/* ---- Head ---- */
.gc-head { text-align: center; max-width: 44rem; margin-inline: auto; }
.gc-kicker { font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: var(--gc-action); }
.gc-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; color: var(--gc-ink);
  font-size: clamp(36px, 7.4vw, 62px); line-height: 1.04; letter-spacing: -0.015em; margin-top: 10px; text-wrap: balance; }
.gc-intro { font-size: 17px; line-height: 1.6; color: var(--gc-muted); margin-top: 10px; }
@media (min-width: 1024px) { .gc-kicker { font-size: 15px; } .gc-intro { font-size: 21px; } }

/* ---- Grids ---- */
.gc-rows { margin-top: 32px; display: grid; gap: 20px; }
@media (min-width: 768px) { .gc-rows { margin-top: 40px; gap: 24px; } }
@media (min-width: 1024px) { .gc-rows { margin-top: 44px; gap: 28px; } }
.gc-grid { display: grid; grid-template-columns: 1fr; gap: 20px; list-style: none; margin: 0; padding: 0; }
.gc-grid > li { display: flex; min-width: 0; }
@media (min-width: 640px) { .gc-grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) {
  .gc-grid--feature { gap: 28px; }
  .gc-grid--small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* ---- Card: one link per card ---- */
.gc-card { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: var(--gc-card); border: 1px solid var(--gc-line); border-radius: var(--gc-radius); box-shadow: var(--gc-shadow);
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--gc-ease), box-shadow .45s var(--gc-ease); }
.gc-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 1672 / 941; background: #E9DCCB; }
.gc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transition: transform .8s var(--gc-ease); }
.gc-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.gc-card__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; color: var(--gc-title);
  font-size: 32px; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: break-word; }   /* natural breaks, as in the mockup (“Equipamentos & / Utilitários”) */
.gc-card__text { font-size: 16px; line-height: 1.55; color: var(--gc-text); margin-top: 8px; }
.gc-card__action { margin-top: auto; padding-top: 18px; }

/* Large cards: a real-looking bordeaux button (a span: the whole card is the link) */
.gc-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 28px; border-radius: 9999px;
  background: var(--gc-action); color: #FFF; font-weight: 600; font-size: 16.5px; letter-spacing: .005em;
  box-shadow: 0 1px 2px rgba(42, 14, 20, .12), 0 6px 14px rgba(110, 26, 42, .18);
  transition: background-color .25s, transform .45s var(--gc-ease); }
.gc-btn svg, .gc-link svg { flex-shrink: 0; transition: transform .45s var(--gc-ease); }
/* Small cards: a calm text link with an arrow */
.gc-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--gc-action); font-weight: 600; font-size: 16px; }

@media (min-width: 1024px) {
  .gc-card--feature .gc-card__body { padding: 14px 28px 22px; }
  .gc-card--feature .gc-card__title { font-size: 42px; }
  .gc-card--feature .gc-card__text { font-size: 18px; margin-top: 6px; }
  .gc-card--feature .gc-card__action { padding-top: 16px; }
  .gc-card--feature .gc-btn { min-height: 48px; font-size: 17px; padding: 0 30px; }
  .gc-card--small .gc-card__media { aspect-ratio: 15 / 8; }   /* a little flatter, as in the mockup */
  .gc-card--small .gc-card__body { padding: 14px 26px 14px; }
  .gc-card--small .gc-card__title { font-size: 34px; }
  .gc-card--small .gc-card__text { font-size: 16px; margin-top: 6px; }
  .gc-card--small .gc-card__action { padding-top: 8px; }
  .gc-card--small .gc-link { font-size: 17px; }
}

/* Tablet: the three small cards become wide horizontal cards (photo left), so text stays readable */
@media (min-width: 640px) and (max-width: 1023px) {
  .gc-card--small { flex-direction: row; align-items: stretch; }
  .gc-card--small .gc-card__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 176px; }
  .gc-card--small .gc-card__body { padding: 20px 24px 20px; justify-content: center; }
  .gc-card--small .gc-card__action { margin-top: 0; padding-top: 10px; }
  .gc-card--feature .gc-card__title { font-size: 34px; }
}

/* Hover (fine pointers only), press, focus */
@media (hover: hover) and (pointer: fine) {
  .gc-card:hover { transform: translateY(-3px); box-shadow: var(--gc-shadow-hover); }
  .gc-card:hover .gc-card__media img { transform: scale(1.03); }
  .gc-card:hover .gc-btn { background: var(--gc-action-hover); }
  .gc-card:hover .gc-btn svg, .gc-card:hover .gc-link svg { transform: translateX(4px); }
  .gc-card:hover .gc-link span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(200, 164, 93, .9); }
}
.gc-card:active { transform: translateY(0) scale(.995); }
.gc-card:focus { outline: none; }
.gc-card:focus-visible { outline: 3px solid #C8A45D; outline-offset: 3px; }
.gc-card:focus-visible .gc-btn { background: var(--gc-action-hover); }

@media (prefers-reduced-motion: reduce) {
  .gc-card, .gc-card__media img, .gc-btn, .gc-btn svg, .gc-link svg { transition: none; }
  .gc-card:hover, .gc-card:active, .gc-card:hover .gc-card__media img { transform: none; }
}

/* ---- 2. B2B photo + launches spacing (index.html inline style) ---- */
/* Homepage B2B block photo (2026-11-06): frame in the photo's own 4:3 ratio instead of the old fixed
     320/460px heights, which would have cut the bags, the bottles or a face at most widths. */
  #b2b .b2b-photo { display: block; height: auto; aspect-ratio: 1448 / 1086; }
  /* Phones: the "+30%" badge (unchanged) would touch the woman's forehead on the smaller photo; the photo
     starts 32px lower so the badge still overlaps its top-right corner but never a face. */
  @media (max-width: 639px) { #b2b .b2b-media { padding-top: 32px; } }
/* Homepage order since 2026-11-06: launches → products (sand band) → categories. The launch section had only
     8px bottom padding (it leaned on the next section's top padding); with a banded section right below it,
     it gets the same space below as above (56px / 76px). Scoped to this page; launches.css is unchanged. */
  #lancamentos.lx-launches { padding-bottom: 56px; }
  @media (min-width: 1024px) { #lancamentos.lx-launches { padding-bottom: 76px; } }