/*
 * q4u_bento — standalone frontend stylesheet.
 *
 * Self-contained CSS for the Bento Grid + Bento Tile content elements.
 * No dependency on q4u_base SCSS patterns — q4u_bento can be deployed
 * to any TYPO3 v13 + Bootstrap 5 site without touching the theme layer.
 *
 * Wired via Configuration/Sets/Q4uBento/setup.typoscript (page.includeCSS).
 *
 * Theme integration:
 *   .bg-primary / .bg-secondary / .bg-tertiary  → from Bootstrap + Q4U $theme-colors (theme-bound)
 *   .bg-primary-subtle / .bg-secondary-subtle    → Bootstrap auto-generates these
 *   .bg-tertiary-subtle                          → defined HERE (Bootstrap doesn't ship it
 *                                                  for custom-added tertiary). Uses
 *                                                  --bs-tertiary-rgb + color-mix() to stay
 *                                                  theme-bound.
 */

/* ── bg-tertiary-subtle — Bootstrap-style tinted variant for custom tertiary ──
   Bootstrap auto-generates .bg-{color}-subtle only for the 8 default theme colors.
   Q4U's tertiary is added to $theme-colors so .bg-tertiary works, but the subtle
   variant must be defined manually.

   Uses --bs-tertiary-rgb (set by Bootstrap when tertiary is in $theme-colors) plus
   color-mix() for the tint computation. Fallback: hardcoded default-theme tertiary
   tinted at 80% white (= the same result tint-color($tertiary, 80%) gives in Sass). */
.bg-tertiary-subtle {
    background-color: var(--bs-tertiary-bg-subtle, #f3f1ed) !important;
    background-color: color-mix(in srgb, rgb(var(--bs-tertiary-rgb, 205, 197, 192)) 20%, white) !important;
}

/* Subtle tiles inside Bento use BLACK or WHITE text — matches the project's
   black/white-only auto-contrast convention (_bg-auto-contrast.scss in q4u_base
   handles the same for solid bg-* classes via color-contrast()). Bootstrap's
   own --bs-{color}-text-emphasis variables produce tinted darks (dark-blue for
   primary-subtle, grayish-tan for tertiary-subtle) — visually muddy, so this
   stays pure black/white rather than switching to those.
   Light mode: Bootstrap's *-subtle backgrounds are tinted with ~80% white, so
   black passes WCAG AAA. Dark mode: Bootstrap re-defines the same *-subtle
   variables as deep, near-black tints (confirmed ~1.1-1.2:1 against black in
   the audit) — text must flip to white there instead. */
.card-tile[class*="bg-"][class*="-subtle"] {
    color: #000;
    --bs-heading-color: #000;
    --bs-emphasis-color: #000;
    --bs-link-color: #000;
    --bs-link-hover-color: #000;
    --bs-body-color: #000;
}

[data-bs-theme="dark"] .card-tile[class*="bg-"][class*="-subtle"] {
    color: #fff;
    --bs-heading-color: #fff;
    --bs-emphasis-color: #fff;
    --bs-link-color: #fff;
    --bs-link-hover-color: #fff;
    --bs-body-color: #fff;
}

/* ── Display typography ────────────────────────────────────────────────── */

/* .font-display inherits the active theme's font-family by default (= the
   project-wide $font-family-base baked into the theme's entry SCSS by
   q4u_base's ThemeGeneratorService).
   A site / theme can override the display font without touching this
   extension by setting --q4u-bento-font-display on :root or a wrapper. */
.font-display { font-family: var(--q4u-bento-font-display, inherit); }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-mono  { letter-spacing: 0.04em; }

/* ── Eyebrow ───────────────────────────────────────────────────────────
   Shared token for the small uppercase mono label above a grid header or a
   tile headline. It replaces an inline `font-size: 0.7rem` that BentoGrid.html
   and BentoTile.html each carried and kept in sync by hand: 0.7rem is 11.2px
   at a 16px root, below this project's 12px (0.75rem) minimum font size.
   That minimum is a project rule; WCAG sets no absolute minimum font size. */
.bento-eyebrow {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.display-hallmark   { font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1.04; letter-spacing: -0.025em; }
.display-hallmark-s { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; }
.display-hallmark-m { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.025em; }

/* ── Card-tile reset (BS5 .card has 1px border + bg-body) ──────────────── */

.card-tile {
    border: 0;
    min-height: 320px;
}

/* ── Tile reveal animation ────────────────────────────────────────────── */

@keyframes q4u-bento-tile-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tile-anim {
    animation: q4u-bento-tile-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tile-anim:nth-child(1) { animation-delay:  60ms; }
.tile-anim:nth-child(2) { animation-delay: 120ms; }
.tile-anim:nth-child(3) { animation-delay: 180ms; }
.tile-anim:nth-child(4) { animation-delay: 240ms; }
.tile-anim:nth-child(5) { animation-delay: 300ms; }
.tile-anim:nth-child(6) { animation-delay: 360ms; }
.tile-anim:nth-child(7) { animation-delay: 420ms; }
.tile-anim:nth-child(8) { animation-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
    .tile-anim,
    .tile-anim * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Image fill mode — image takes the remaining vertical space inside the tile.
   Tile padding stays intact (p-4 / p-md-5 on the card), but the image stretches
   to fill the inner area. object-fit: cover + the editor's focal point (read by
   imgproxy via crop variants) keeps the framing readable on any aspect ratio.

   Layout uses position:absolute on the <img> rather than width/height:100% on the
   <picture> wrapper — Firefox doesn't size <picture> as a flex item reliably,
   so the absolute-positioned img + relative parent gives a consistent box
   across Chrome / Firefox / Safari. */

.tile-image-fill {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    min-height: 180px;
}
.tile-image-fill picture {
    display: block;
    width: 100%;
    height: 100%;
}
/* Position the <img> absolutely so it fills the containing .tile-image-fill
   regardless of picture's intrinsic-content sizing (Chrome treats <picture>
   like a replaced element whose height collapses to image aspect-ratio even
   with inset:0). */
.tile-image-fill img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Focal point is set as --focal-pos on the parent .tile-image-fill via the
       <bento:focalPoint> ViewHelper. Defaults to centre when no focal point is set. */
    object-position: var(--focal-pos, 50% 50%);
    display: block;
}

/* Edge-to-edge image mode — used when tileColor=none AND an image is set.
   Card loses inner padding; the image becomes the tile. overflow:hidden +
   rounded-4 (on the card) clip the image to the card's rounded corners. */
.card-tile--image-edge {
    overflow: hidden;
    min-height: 320px;
}
.card-tile--image-edge .tile-image-fill {
    flex: 1 1 auto;
    border-radius: 0;
    min-height: 100%;
}

/* ── Tile-CTA arrow ────────────────────────────────────────────────────── */

.tile-cta {
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tile-cta:hover { gap: 0.65rem; color: inherit; }
.tile-cta::after { content: "→"; }