/* ═══════════════════════════════════════════════════════════════════
   how-bento.css — the asymmetric 3-tile mosaic used by the homepage's
   "How We Work" section.
   ─────────────────────────────────────────────────────────────────────
   Ported from .hn-how in public/css/home-new.css, which is scoped under
   .home-new and therefore unusable anywhere else. labs.css carries a
   second copy of the same pattern as .lb-how-*. This file is the shared
   version so a third copy never gets written.

   Markup stays per-page (the content differs too much to justify a
   partial); only the styling is shared. Same arrangement as
   .ins-gradient-card in inside-pages.css.

   Structure:
     .ent-bento
       .ent-bento-head      kicker + title + lede + link
       .ent-bento-grid
         .ent-bento-card.is-c1   tall tile, left, spans both rows
         .ent-bento-card.is-c2   upper right
         .ent-bento-card.is-c3   lower right, flipped light

   Card content classes (mix as the page needs):
     .ent-bento-n        oversized step number
     .ent-bento-eyebrow  small uppercase label
     .ent-bento-name     tile heading
     .ent-bento-desc     tile body copy (a quotation uses this too, so
                         every tile reads at one size)
     .ent-bento-attr     quote attribution
     .ent-bento-btn      pill action

   Colours are fixed to the brand cycle: c1 teal, c2 orange, c3 white.
   ═══════════════════════════════════════════════════════════════════ */

.ent-bento {
  --ent-bento-r: 18px;
  /* Flat brand navy. Header type is flipped white below; the tiles sit
     on it as a colour block, with the flipped-white c3 carrying the
     contrast at the bottom right. */
  background: var(--navy);
  padding: 110px 40px 104px;
}

.ent-bento-head { max-width: 1440px; margin: 0 auto 80px; }

.ent-bento-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}
.ent-bento-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: #ffffff;
}

.ent-bento-title {
  margin: 20px 0;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.ent-bento-lede {
  margin: 0 0 30px;
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  color: rgba(255,255,255,0.78);
}

.ent-bento-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
}
.ent-bento-link svg { width: 17px; height: 17px; }

/* Asymmetric layout: left column full-height (biggest), right column
   split into a taller upper cell and a shorter lower cell. */
.ent-bento-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 3fr 2fr;
  gap: 0;
}
.ent-bento-grid > .is-c1 { grid-column: 1; grid-row: 1 / 3; }
.ent-bento-grid > .is-c2 { grid-column: 2; grid-row: 1; }
.ent-bento-grid > .is-c3 { grid-column: 2; grid-row: 2; }

/* Full-size panels: solid brand colour + the top-left dark bloom used
   on the insight cards. Content anchored top, action pushed to bottom. */
.ent-bento-card {
  display: flex;
  flex-direction: column;
  /* Content sits at the BOTTOM of each tile, matching the case-studies
     and process bentos. */
  justify-content: flex-end;
  padding: 36px 32px 32px;
  min-height: 220px;
  border-radius: 0;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  transition: filter .25s ease;
}
a.ent-bento-card { text-decoration: none; color: inherit; }
a.ent-bento-card:hover { filter: brightness(1.08); }

.ent-bento-card.is-c1 { background-color: var(--teal); }
.ent-bento-card.is-c2 { background-color: var(--orange); }
.ent-bento-card.is-c3 { background-color: #ffffff; }

/* Outer four corners only, so the 3 panels read as one soft-cornered
   mosaic. c1 owns both left corners, c2 top-right, c3 bottom-right. */
.ent-bento-grid > .is-c1 {
  border-top-left-radius: var(--ent-bento-r);
  border-bottom-left-radius: var(--ent-bento-r);
}
.ent-bento-grid > .is-c2 { border-top-right-radius: var(--ent-bento-r); }
.ent-bento-grid > .is-c3 { border-bottom-right-radius: var(--ent-bento-r); }

.ent-bento-n {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.72);
}
.ent-bento-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.ent-bento-name {
  margin: 20px 0 14px;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
}
.ent-bento-desc {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
  color: rgba(255,255,255,0.9);
}
/* .ent-bento-attr is a <footer> inside the <blockquote>, which is the
   correct semantic for an attribution — but entexis.css:794 styles the
   bare `footer` element (the site footer: white plate, 60px 72px 36px
   padding, top border). Without this reset that paints a white patch
   across the tile. Same class of trap as the bare `nav` selector. */
.ent-bento-attr {
  margin: 0;
  background: none;
  border-top: 0;
  padding: 28px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
}

/* c3 is flipped light, so every text colour inverts to read on white. */
.ent-bento-card.is-c3 .ent-bento-n,
.ent-bento-card.is-c3 .ent-bento-eyebrow,
.ent-bento-card.is-c3 .ent-bento-attr { color: rgba(26,40,87,0.55); }
.ent-bento-card.is-c3 .ent-bento-name { color: var(--navy); }
.ent-bento-card.is-c3 .ent-bento-desc { color: var(--muted); }

.ent-bento-btn {
  margin-top: 32px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: var(--navy);
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.ent-bento-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ent-bento-btn:hover { background: var(--navy); color: #fff; }
.ent-bento-btn:hover svg { transform: translateX(3px); }
.ent-bento-card.is-c3 .ent-bento-btn { background: var(--navy); color: #ffffff; }
.ent-bento-card.is-c3 .ent-bento-btn:hover { background: var(--teal); color: #ffffff; }

@media (max-width: 1100px) {
  .ent-bento { padding: 92px 40px 88px; }
  .ent-bento-head { margin-bottom: 60px; }
  .ent-bento-card { padding: 32px 28px 28px; min-height: 200px; }
}
@media (max-width: 900px) {
  .ent-bento { padding: 76px 40px 72px; }
  .ent-bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  /* Reset explicit placement so cards stack in DOM order. */
  .ent-bento-grid > .is-c1,
  .ent-bento-grid > .is-c2,
  .ent-bento-grid > .is-c3 { grid-column: 1; grid-row: auto; }
  .ent-bento-card { min-height: 240px; }
  /* Single column: c1 = both top corners, c3 = both bottom, c2 flat. */
  .ent-bento-grid > .is-c1 { border-radius: var(--ent-bento-r) var(--ent-bento-r) 0 0; }
  .ent-bento-grid > .is-c2 { border-radius: 0; }
  .ent-bento-grid > .is-c3 { border-radius: 0 0 var(--ent-bento-r) var(--ent-bento-r); }
}
@media (max-width: 720px) {
  .ent-bento { padding: 58px 18px 56px; }
  .ent-bento-head { margin-bottom: 40px; }
  .ent-bento-title { margin: 18px 0 20px; }
  .ent-bento-card { padding: 26px 22px 22px; min-height: 200px; }
}