/*!
 * Brand Row — one brand on the Brands page (1:2481 - 1:2734): photo, name tag,
 * logo, copy and buttons, optionally on the peach band. Reusable: one instance per brand.
 *
 * Figma 1:2471 in the Monal-Pages file AlYDxKHhVoiNp5UI47BElc.
 *
 * Split from design/brands.css, which stays the source of truth. Mobile first;
 * desktop values are the frame's, as --monal-u units (1u == 1 Figma px / 10).
 */

/* ==========================================================================
   Monal Group — Brands page: the reusable brand row
   HTML prototype stylesheet, split into widgets/monal-brand-row/ by
   design/_split-brands-css.php (re-run it after any change here). The hero
   is the shared monal-lead-hero in its "brands" layout (see that widget).

   Figma file AlYDxKHhVoiNp5UI47BElc (Monal-Pages), frame 1:2471
   "The Monal Group | Brands page", 1920 wide. Every desktop length is the
   Figma value / 10 in --monal-u. Mobile is written first and is derived:
   no mobile frame exists.

   One row = one brand: a 872 x 587.444 photo (radius 20), the green name
   tag overlapping its inner edge, then the logo, copy and the two buttons in
   a 597 column on the other side. Rows alternate sides; the image-right rows
   sit on a peach band with a notch at each end.
   ========================================================================== */

.monal-brand-row { position: relative; padding: var(--monal-page-gap) 0; }

.monal-brand-row--band { padding-top: calc(var(--monal-page-gap) + var(--monal-u) * 2.4); }


.monal-brand-row__grid { display: grid; grid-template-columns: minmax(0, 1fr); }


/* --- photo + name tag --------------------------------------------------- */
.monal-brand-row__media { position: relative; }

.monal-brand-row__photo {
  display: block; width: 100%; aspect-ratio: 872 / 587.444;
  border-radius: calc(var(--monal-u) * 1.6); overflow: hidden; background: #ffe5d7;
}

.monal-brand-row__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* 1:2667 — #2C5A4F, leaf corners (TL / BR 30), a 4px white drop shadow,
   Poppins Medium 56/72, -2.24 tracking, white. It is the row's heading. */
.monal-brand-row__name {
  position: absolute; z-index: 1; top: calc(var(--monal-u) * 1.6); left: calc(var(--monal-u) * 1.2);
  margin: 0; padding: calc(var(--monal-u) * .6) calc(var(--monal-u) * 1.4);
  border-radius: calc(var(--monal-u) * 2) 0 calc(var(--monal-u) * 2) 0;
  background: var(--monal-c-green); color: #fff;
  filter: drop-shadow(0 calc(var(--monal-u) * .3) 0 #fff);
  font-weight: 500; font-size: max(calc(var(--monal-u) * 2.6), 24px); line-height: 1.25;
  letter-spacing: -.04em; white-space: nowrap;
}

.monal-brand-row--right .monal-brand-row__name { left: auto; right: calc(var(--monal-u) * 1.2); }


/* --- copy column -------------------------------------------------------- */
.monal-brand-row__head { display: flex; align-items: center; margin-top: calc(var(--monal-u) * 2.4); }

/* The logo's width is the frame's, per brand (--monal-logo-w, Figma px);
   phones show it at 70%. */
.monal-brand-row__logo { display: block; width: calc(var(--monal-u) * var(--monal-logo-w, 160) / 10 * .7); max-width: 100%; height: auto; }


/* 1:2484 — Poppins Light 18/26 at 70%, w597; paragraphs a blank line apart. */
.monal-brand-row__text { margin-top: calc(var(--monal-u) * 2); }

.monal-brand-row__text p {
  margin: 0; font-weight: 300; font-size: max(calc(var(--monal-u) * 1.6), 15px); line-height: 1.6;
  color: var(--monal-c-muted);
}

.monal-brand-row__text p + p { margin-top: 1.6em; }


/* --- buttons ------------------------------------------------------------ */
.monal-brand-row__actions { display: flex; align-items: center; gap: calc(var(--monal-u) * 1.6); margin-top: calc(var(--monal-u) * 2.4); }

/* 1:2491 — the brand's glyph on a 57.22 orange leaf (TL / BR 15.43). Some
   glyph SVGs carry the leaf themselves; the CSS one sits under them. */
.monal-brand-row__icon {
  flex: none; display: grid; place-items: center;
  width: calc(var(--monal-u) * 4.8); height: calc(var(--monal-u) * 4.8);
  border-radius: calc(var(--monal-u) * 1.3) 0 calc(var(--monal-u) * 1.3) 0;
  background: var(--monal-c-orange);
}

.monal-brand-row__icon img { display: block; width: calc(var(--monal-u) * var(--monal-icon-w, 57.22) / 10 * .839); height: auto; }

/* 1:2487 — "READ MORE": 150.506 x 57.223, a 1px orange outline with leaf
   corners; Poppins SemiBold 14/21.606 uppercase ink, the arrow 12 after it. */
.monal-brand-row .monal-brand-row__more {
  display: inline-flex; align-items: center; gap: calc(var(--monal-u) * 1.2);
  min-height: calc(var(--monal-u) * 4.8); padding: 0 calc(var(--monal-u) * 2);
  border: 1px solid var(--monal-c-orange);
  border-radius: calc(var(--monal-u) * 1.3) 0 calc(var(--monal-u) * 1.3) 0;
  background: transparent; color: var(--monal-c-ink);
  font-weight: 600; font-size: max(calc(var(--monal-u) * 1.3), 12px); line-height: 1.55;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .3s, color .3s;
}

.monal-brand-row .monal-brand-row__more:hover,
.monal-brand-row .monal-brand-row__more:focus-visible { background: var(--monal-c-orange); color: #fff; }

.monal-brand-row__more .monal-i { width: calc(var(--monal-u) * 1); height: calc(var(--monal-u) * 1); transition: transform .35s var(--monal-ease-out); }

.monal-brand-row__more:hover .monal-i { transform: translate(calc(var(--monal-u) * .2), calc(var(--monal-u) * -.2)); }


/* --- the peach band ------------------------------------------------------ */
/* 1:2516 — rgba(255,229,215,.5), full bleed, the row's full height. 1:2517
   (top): the white notch of the section above hangs into it; 1:2518
   (bottom): its own notch hangs into the section below. Both are the Figma
   SVGs turned 180, drawn at the frame's 1920 x 42.035 scale and centred, so
   only the notch (152 wide) ever shows. */
.monal-brand-row__band {
  position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background: rgba(255, 229, 215, .5);
  --monal-tab: .7;
}

.monal-brand-row__band::before,
.monal-brand-row__band::after {
  content: ""; position: absolute; left: 50%;
  width: calc(var(--monal-u) * 192 * var(--monal-tab)); margin-left: calc(var(--monal-u) * -96 * var(--monal-tab));
  height: calc(var(--monal-u) * 4.2035 * var(--monal-tab));
  background: center / 100% 100% no-repeat;
  transform: rotate(180deg);
}

.monal-brand-row__band::before { top: 0; background-image: url(../../assets/monal/img/pages/brands/band-tab-top.svg); }

.monal-brand-row__band::after { top: 100%; background-image: url(../../assets/monal/img/pages/brands/band-tab-bottom.svg); }

/* The last row's band runs on under the footer's top (1:2585, 1168.466
   tall) and closes with the larger notch (1:2587, 1920 x 53.559). */
.monal-brand-row--into-footer .monal-brand-row__band::after {
  height: calc(var(--monal-u) * 5.3559 * var(--monal-tab));
  background-image: url(../../assets/monal/img/pages/brands/band-tab-bottom-lg.svg);
}

@media (min-width: 768px) {
  
    .monal-brand-row__text { max-width: calc(var(--monal-u) * 64); }
  
    .monal-brand-row__logo { width: calc(var(--monal-u) * var(--monal-logo-w, 160) / 10 * .85); }
}

@media (min-width: 1200px) {
  
    /* Plain rows: 144.28 above the photo, 140 below it (871.72 in all, e.g.
       DESI KITCHENEETE 2357.88 -> 3229.6). Banded rows: 168.28 / 144.28, the
       band's 900. */
    .monal-brand-row { padding: calc(var(--monal-u) * 14.428) 0 calc(var(--monal-u) * 14); }
  
    .monal-brand-row--band { padding: calc(var(--monal-u) * 16.828) 0 calc(var(--monal-u) * 14.428); }
  
    /* The photo's foot sits 162.04 above the footer panel (9295.46 ->
       9457.5); the footer widget adds its own 24 on top. */
    .monal-brand-row--into-footer { padding-bottom: calc(var(--monal-u) * 13.804); }
  
    .monal-brand-row--into-footer .monal-brand-row__band { bottom: calc(var(--monal-u) * -27.471); }
  
    .monal-brand-row__band { --monal-tab: 1; }
  
  
    /* Photo 872 at one edge of the 1544 column, copy 597 at the other
       (x188 / x1135, or x860 / x188). */
    .monal-brand-row__grid {
      grid-template-columns: calc(var(--monal-u) * 87.2) minmax(0, 1fr) calc(var(--monal-u) * 59.7);
      align-items: start;
    }
  
    .monal-brand-row__media { grid-column: 1; grid-row: 1; }
  
    .monal-brand-row__copy { grid-column: 3; grid-row: 1; }
  
    .monal-brand-row--right .monal-brand-row__grid { grid-template-columns: calc(var(--monal-u) * 59.7) minmax(0, 1fr) calc(var(--monal-u) * 87.2); }
  
    .monal-brand-row--right .monal-brand-row__media { grid-column: 3; }
  
    .monal-brand-row--right .monal-brand-row__copy { grid-column: 1; }
  
  
    .monal-brand-row__photo { height: calc(var(--monal-u) * 58.7444); aspect-ratio: auto; border-radius: calc(var(--monal-u) * 2); }
  
  
    /* 1:2667 at (998.69, 781.78): 51.35 below the photo's top, overhanging its
       inner edge by 61.31. */
    .monal-brand-row__name {
      top: calc(var(--monal-u) * 5.135); left: calc(100% - var(--monal-u) * 6.131);
      padding: calc(var(--monal-u) * .8) calc(var(--monal-u) * 2);
      border-radius: calc(var(--monal-u) * 3) 0 calc(var(--monal-u) * 3) 0;
      filter: drop-shadow(0 calc(var(--monal-u) * .4) 0 #fff);
      font-size: calc(var(--monal-u) * 5.6); line-height: calc(var(--monal-u) * 7.2);
      letter-spacing: calc(var(--monal-u) * -.224);
    }
  
    .monal-brand-row--right .monal-brand-row__name { left: auto; right: calc(100% - var(--monal-u) * 6.131); }
  
  
    /* The logo is centred 91 below the photo's top (the frame's logos sit
       85-99 below it), at the outer edge of the copy column; the copy starts
       190.3 below the photo's top. */
    .monal-brand-row__head { height: calc(var(--monal-u) * 18.2); margin-top: 0; justify-content: flex-end; }
  
    .monal-brand-row--right .monal-brand-row__head { justify-content: flex-start; }
  
    .monal-brand-row__logo { width: calc(var(--monal-u) * var(--monal-logo-w, 160) / 10); }
  
    /* Every row's buttons sit 300 under the copy's top (1:2484 -> 1:2487):
       the copy is given that room, less the 40 gap, so the buttons line up
       whatever the copy's length. */
    .monal-brand-row__text { max-width: none; margin-top: calc(var(--monal-u) * .83); min-height: calc(var(--monal-u) * 26); }
  
    .monal-brand-row__text p { font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.6); }
  
    .monal-brand-row__text p + p { margin-top: calc(var(--monal-u) * 2.6); }
  
  
    .monal-brand-row__actions { margin-top: calc(var(--monal-u) * 4); gap: calc(var(--monal-u) * 2); }
  
    .monal-brand-row__icon {
      width: calc(var(--monal-u) * 5.722); height: calc(var(--monal-u) * 5.722);
      border-radius: calc(var(--monal-u) * 1.543) 0 calc(var(--monal-u) * 1.543) 0;
    }
  
    .monal-brand-row__icon img { width: calc(var(--monal-u) * var(--monal-icon-w, 57.22) / 10); }
  
    .monal-brand-row .monal-brand-row__more {
      min-height: calc(var(--monal-u) * 5.722); padding: 0 calc(var(--monal-u) * 2.4);
      gap: calc(var(--monal-u) * 1.2);
      border-radius: calc(var(--monal-u) * 1.543) 0 calc(var(--monal-u) * 1.543) 0;
      font-size: max(calc(var(--monal-u) * 1.4), 12px); line-height: calc(var(--monal-u) * 2.161);
    }
  
    /* The arrow is 8.843 (10.386 with its stroke). */
    .monal-brand-row__more .monal-i { width: calc(var(--monal-u) * 1.0386); height: calc(var(--monal-u) * 1.0386); }
}