/* The theme pads every <article>; photo tiles must be edge to edge so the caption sits where the design has it. */
body .sb-blk.sb-bentos .tile.k-photo{padding:0 !important}
/* The design's "tint" band is the Branding Fifth (tint) color, which base.css clears from the section; paint it here (same as cards). --st-space is 0 in the frame, so pad with a clamp. */
body .sb-blk.sb-bentos .sec.on-tint{background:var(--pb-tint) !important}
/* Row backgrounds: ink band = the design's text color; surface = the design's plain white. */

/* Explicit opt-in: adaptive tiles never use the fixed per-look slots. */
body .sb-bentos .bento.cc-bento-adaptive { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-auto-rows: auto; }
body .sb-bentos .cc-bento-adaptive > .tile { grid-area: auto; min-height: 0; }


/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-bentos .top code { font-size: var(--fs-small) !important; }
body .sb-bentos .tt { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-bentos .big .tt { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-bentos .b3 .k-quote blockquote { font-size: var(--fs-quotes) !important; }
body .sb-bentos .big blockquote { font-size: var(--fs-quotes) !important; }
body .sb-bentos .k-photo.chip .cap .h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-bentos .k-photo.pano .h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-bentos .num { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-bentos .giant .num { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-bentos .giant .h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-bentos .k-quote blockquote { font-size: var(--fs-quotes) !important; }
body .sb-bentos .huge blockquote { font-size: var(--fs-quotes) !important; }
body .sb-bentos .k-button.big .tt { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }

/* 3.6.10: the Branding Sizes overrides above dropped the tile-width caps, so stats, quotes and titles ran past narrow
   tiles (BEN-01/04/07/08/11/16/17/19). Every tile is an inline-size container: keep the Branding size, never wider than the tile. */
body:not(.cc-look-pre-3-6-10) .sb-bentos .tile .num { font-size: min(clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)), 24cqi) !important; }
body:not(.cc-look-pre-3-6-10) .sb-bentos .tile blockquote { font-size: min(var(--fs-quotes), 10.5cqi) !important; }
body:not(.cc-look-pre-3-6-10) .sb-bentos .tile :is(.tt, .h3) { font-size: min(clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)), 15cqi) !important; }

/* 3.6.10: looks that paint their own band (BEN-04/10/14/19: the category's page color, a tint or a dark bar of their own)
   keep their light-row colors on a dark row, so they render the same on every row. The dark row only turned their
   text white (white on their own light band) and faded their surface color to an 8% tint. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-bentos.sb-edge.sb-dark:is(.sb-look-04, .sb-look-10, .sb-look-14, .sb-look-19) { --pb-text: var(--color-body, var(--color-headings)); --pb-muted: var(--color-muted); --pb-border: var(--color-line); --pb-surface: var(--color-surface, var(--color-fourth)); --form-label-color: inherit; color: var(--pb-text); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-bentos.sb-edge.sb-dark:is(.sb-look-04, .sb-look-10, .sb-look-14, .sb-look-19) .btn:not(.ghost):not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: var(--btn-fill); color: var(--btn-color); border-color: var(--btn-border); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-bentos.sb-edge.sb-dark:is(.sb-look-04, .sb-look-10, .sb-look-14, .sb-look-19) .btn.ghost:not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: transparent; color: var(--btn-outline); border-color: var(--btn-outline); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-bentos.sb-edge.sb-dark:is(.sb-look-04, .sb-look-10, .sb-look-14, .sb-look-19) .tlink:not(:is(.dark, .ink, .is-dark, .on-dark, .photo, .ov) *) { color: var(--color-link); }
/* 3.6.10: base.css paints .b07 and .b19 Dark on a dark row (staff bios 07 and 19 panels); the bento grids 07 and 19 share
   those class names and showed black lines between their tiles. Bento grids stay unpainted. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-bentos.sb-dark :is(.b07, .b19) { background: transparent; }