/* ============================================================
   BeeGroup — Section: Nuestras marcas (Fase 04.5)

   Shared composition system. The three brand cards (Territorio
   Tigres, Auntie Anne's, Care-A-Lot) use ONE reticle. All visual
   variation per brand is data-driven via custom properties that
   brand-card.php writes on the `.brand-card` element inline from
   the CPT — `--brand-bg`, `--brand-text`, `--brand-cta-bg`,
   `--brand-cta-text`, `--brand-bg-image`. The only per-brand CSS
   rule is `.brand-card--photo-left` which swaps the column order
   on Auntie Anne's (photo on the left, text on the right).

   Everything the 04.1 → 04.4 iterations layered on top as
   per-brand overrides — custom padding, custom inner gap, custom
   photo max-widths, custom justify-self — is deliberately gone.
   ============================================================ */

/* ---------- Section wrapper ------------------------------- */
.marcas {
  background: var(--bg-off-white);   /* shares Somos BeeGroup's backdrop */
  /* Fase 10 — top padding dropped to zero. Measured at 1440 the "above
     header" distance was 144 px (Somos bottom-pad 112 + Marcas top-pad
     48 - 16 margin collapse) while "below header" was 48 px — a 96 px
     delta the brief required to equalise. Removing the top padding
     means `above` = Somos's own bottom padding; `.marcas__header`
     below is sized to match it (see rule below). */
  padding-block: 0 clamp(2rem, 4vw, 4rem);
  color: var(--color-text);
}
.marcas > .container {
  max-width: var(--container-wide);  /* ~1440 px at desktop */
}

/* ---------- Section heading ------------------------------- */
.marcas__header {
  text-align: center;
  /* Fase 10 — mirrors Somos BeeGroup's own `padding-block`
     EXACTLY (`clamp(3rem, 7vw, 7rem)`) so the header has the SAME
     breathing room above (= Somos bottom-pad) and below (= this
     margin-bottom). Measured deltas go to ≈0 at every breakpoint. */
  margin-bottom: clamp(3rem, 7vw, 7rem);
}
.marcas__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.1;
  color: var(--bg-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 0.6vw, 0.5rem);
}
.marcas__title-main { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.marcas__title-sub  { font-size: clamp(1.75rem, 4.4vw, 3.5rem); }
.marcas__title-mark { color: var(--color-primary); } /* Orange Impact */

/* ---------- Card list ------------------------------------
   The gap MUST clear the max visible overflow of a card so that
   the media that pokes below one card never collides with the
   next one. Overflow = `--brand-overflow` (see .brand-card).  */
.marcas__list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 5rem);
}

/* ============================================================
   Brand card — shared system
   ============================================================ */
.brand-card {
  /* --- Data-driven tokens (PHP writes these inline per card) --- */
  --brand-bg:        #F3F3F3;
  --brand-text:      #1a1a1a;
  --brand-cta-bg:    #000000;
  --brand-cta-text:  #FFFFFF;
  --brand-bg-image:  none;

  /* --- Shared geometry (identical for every brand) ------------- */
  --brand-pad:       clamp(1.75rem, 3vw, 3.25rem);
  --body-gap:        clamp(1.5rem, 3vw, 3rem);
  /* How much the media figure visibly extends past the card's
     bottom edge. Positive-only: the photo is positioned absolutely
     with `bottom: calc(-1 * var(--brand-overflow))`, so this value
     is literally the pixel count visible below the card. */
  --brand-overflow:  clamp(36px, 4vw, 64px);

  position: relative;
  isolation: isolate;
  /* Fase 04.6 — expose the card's inline size as `cqw` so the body
     can compute its own `min-height` from the photo column width.
     This lets the orange/blue/pastel container shrink to the text
     column's height while keeping enough room for the (absolutely
     positioned) photo to sit cleanly below the header. */
  container-type: inline-size;
  background: var(--brand-bg);
  color: var(--brand-text);
  border-radius: var(--radius-xl);
  /* `visible` so the media can poke past the rounded bottom; the
     decorative background is clipped by `.brand-card__bg` below. */
  overflow: visible;
  box-shadow: var(--shadow-sm);
}

/* Decorative pattern (client-supplied PNG/SVG) painted behind
   the content. Its own `overflow: hidden` + `border-radius:
   inherit` keeps the pattern clipped to the card's rounded
   corners even though the card itself allows overflow. */
.brand-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--brand-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.85;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.brand-card__inner {
  position: relative;
  z-index: 1;
  padding: var(--brand-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 2rem);
}

/* ---------- Header row: logo + links --------------------- */
.brand-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.brand-card__logo {
  flex: 0 0 auto;
  max-width: min(260px, 60vw);
}
.brand-card__logo img {
  max-height: clamp(64px, 6.25vw, 96px);
  width: auto;
  height: auto;
  display: block;
}
.brand-card__links {
  margin-left: auto;
  text-align: right;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.4;
  color: var(--brand-text);
}
.brand-card__socials {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.brand-card__socials a,
.brand-card__url {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--fw-medium);
}
.brand-card__url {
  display: inline-block;
  word-break: break-all;
}

/* ---------- Body: text column + media column ------------
   Fase 04.6 — the body is now a two-column grid whose row height
   is driven exclusively by the text column (the photo has been
   lifted out of the flow via absolute positioning, see below).
   The `min-height` guarantees the row is tall enough to host the
   absolutely-positioned photo without colliding with the header:
     required_body = col_width * 9/16 − overflow − bottom_pad
   where col_width = (card_width − 2 × pad − gap) / 2.
   Container queries let us express this geometrically on the body. */
.brand-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--body-gap);
  align-items: start;
  min-height: calc(
    (100cqw - 2 * var(--brand-pad) - var(--body-gap)) / 2 * 9 / 16
    - var(--brand-overflow)
    - var(--brand-pad)
  );
}
.brand-card__content {
  min-width: 0;
  grid-column: 1;
}
/* The ONLY per-brand CSS rule: swap column placement for the brands
   that are configured as "photo-left" in the admin (Auntie). The
   photo itself is absolute, so we only move the content. */
.brand-card--photo-left .brand-card__content { grid-column: 2; }

.brand-card__description {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.65;
}
.brand-card__description > p { margin: 0 0 var(--sp-4); }
.brand-card__description > p:last-child { margin-bottom: 0; }
.brand-card__description strong { font-weight: var(--fw-semibold); }
.brand-card__description a { color: inherit; text-decoration: underline; }

/* ---------- CTA ------------------------------------------- */
.brand-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding: 0.85rem 1.8rem;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--brand-cta-bg);
  color: var(--brand-cta-text);
  font-weight: var(--fw-semibold);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1;
  transition: filter var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.brand-card__cta:hover,
.brand-card__cta:focus-visible {
  color: var(--brand-cta-text);
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ---------- Media (photo or video) -----------------------
   Fase 04.6 — the media is lifted OUT of the body grid flow and
   positioned absolutely relative to the card. This means the
   coloured container's height is no longer forced by the photo's
   intrinsic 16:9 height; it's driven by the text column only.
   The photo keeps its visual size (same width, same aspect ratio,
   same visible overflow) and still bleeds `--brand-overflow`
   pixels past the card's bottom edge.

   Width is derived from the shared tokens so the photo column is
   still exactly half of the inner body (identical to Fase 04.5).
*/
.brand-card__photo {
  position: absolute;
  z-index: 2;
  bottom: calc(-1 * var(--brand-overflow));
  width: calc((100% - 2 * var(--brand-pad) - var(--body-gap)) / 2);
  aspect-ratio: 16 / 9;
  margin: 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: var(--shadow-md);
}
.brand-card--photo-right .brand-card__photo { right: var(--brand-pad); }
.brand-card--photo-left  .brand-card__photo { left:  var(--brand-pad); }

.brand-card__photo img,
.brand-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .brand-card__body { gap: clamp(1.25rem, 3vw, 2rem); }
  .brand-card__logo img { max-height: clamp(60px, 6vw, 88px); }
  .brand-card { --brand-overflow: clamp(28px, 3.5vw, 48px); }
}

@media (max-width: 768px) {
  .brand-card {
    /* No bleed when stacking — the media sits fully inside the card. */
    --brand-overflow: 0px;
  }
  .brand-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .brand-card__links {
    margin-left: 0;
    text-align: left;
    width: 100%;
  }
  .brand-card__socials { justify-content: flex-start; }
  .brand-card__body {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 2rem);
    /* Cancel the desktop container-query min-height; mobile is content-driven. */
    min-height: 0;
  }
  /* Content back to a single column; cancel the photo-left shift. */
  .brand-card__content,
  .brand-card--photo-left .brand-card__content { grid-column: 1; order: 0; }

  /* Photo re-enters normal grid flow and sits below the text. */
  .brand-card__photo,
  .brand-card--photo-right .brand-card__photo,
  .brand-card--photo-left  .brand-card__photo {
    position: static;
    width: 100%;
    right: auto;
    left: auto;
    bottom: auto;
    order: 1;
  }
  .marcas__list { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .brand-card__cta { width: 100%; max-width: 320px; }
}

@media (max-width: 480px) {
  .brand-card { --brand-pad: clamp(1.25rem, 5vw, 1.75rem); }
  .brand-card__socials { gap: 1rem; flex-wrap: wrap; }
}