/*
 * Info Strip website section
 *
 * Rendered by widgets/InfoStripSectionWidget.php. The chips inside are the
 * ordinary header info chips (helpers/header_sections/*, wrapped by
 * InfoChipBase::wrap()), so the markup is identical in all three layouts:
 *
 *   .wb-info-strip
 *     span.website-header-section-wrap
 *       span.website-chip
 *         span.website-chip-icon
 *         span.website-chip-label   (only in 'labeled' display style)
 *         span.website-chip-value
 *
 * Everything below is layout over that fixed structure - no chip class
 * knows this file exists. Base chip styling lives in header-chips.css.
 *
 * Surfaces are mixed from currentColor rather than the --card-* tokens on
 * purpose: an Info Strip can sit on a light, dark, primary, gradient or
 * image section background, and currentColor is the one value that is
 * already correct on all of them (the section chrome publishes a readable
 * color, and .website-chip inherits it).
 */

.wb-info-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--wb-info-gap, var(--space-4));
}

/* ---------------------------------------------------------------- align */

.wb-info-strip--align-left   { justify-content: flex-start; }
.wb-info-strip--align-center { justify-content: center; }
.wb-info-strip--align-right  { justify-content: flex-end; }

/* ------------------------------------------------------------------ gap */

/* Roughly doubling at each step - the earlier 8/16/32px scale read as three
   shades of "tight" once the chips had real presence. */
.wb-info-strip--gap-sm { --wb-info-gap: var(--space-2); }   /* 8px  */
.wb-info-strip--gap-md { --wb-info-gap: var(--space-8); }   /* 32px */
.wb-info-strip--gap-lg { --wb-info-gap: var(--space-16); }  /* 64px */

/* ----------------------------------------------------------------- size */
/* One scale knob the layouts below read, so size and layout stay
   independent instead of needing nine combinations. */

.wb-info-strip--size-sm { --wb-info-scale: 0.875; }
.wb-info-strip--size-md { --wb-info-scale: 1; }
.wb-info-strip--size-lg { --wb-info-scale: 1.25; }

.wb-info-strip .website-header-section-wrap {
    display: inline-flex;
}

/* Icon slot.
 *
 * Three things bite once a chip icon is scaled past its header size:
 *
 * 1. Colour-emoji glyphs paint OUTSIDE their em box. At the Feature layout's
 *    4.5rem that clipped the top-right corner off the moon, the sunset and
 *    the planets - overflow:visible does not help, because the glyph is
 *    bounded by the font's own metrics rather than by the element. The fix is
 *    to give the slot explicit square dimensions and let the glyph sit inside
 *    them with a little padding, so the paint area is defined by the box.
 * 2. Emoji also paint taller than their line box, and the builder's
 *    auto-height preview measures the BOX - so the sidebar preview cropped
 *    the section while the live page (which just overflows) looked fine.
 * 3. Inline SVGs now declare width/height="1em" themselves, so they track
 *    font-size natively; these rules are a backstop for any that do not.
 *
 * Chips carry website-chip-icon--emoji or --svg (set in InfoChipBase::wrap)
 * because the two need genuinely different treatment.
 */
.wb-info-strip .website-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    line-height: 1.15;
    overflow: visible;
    flex: 0 0 auto;
}

/* Emoji: shrink the line box to the glyph and pad, so the overshoot has room
   inside the slot instead of being cut off at the edge. */
.wb-info-strip .website-chip-icon--emoji {
    line-height: 1;
    padding: 0.08em;
}

.wb-info-strip .website-chip-icon--svg {
    line-height: 0;
}

/* overflow must stay VISIBLE: phaseSvg() draws the lunar terminator as an arc
   that legitimately reaches the edge of its viewBox, and clipping it shaved a
   sliver off the lit limb. */
.wb-info-strip .website-chip-icon svg {
    width: 1em;
    height: 1em;
    overflow: visible;
    vertical-align: baseline;
}

/* =============================================================== layouts */

/* --- strip: a slim inline row, the header treatment ------------------- */

.wb-info-strip--strip .website-chip {
    font-size: calc(var(--font-size-sm) * var(--wb-info-scale, 1));
    padding: var(--space-1) var(--space-2);
}

.wb-info-strip--strip .website-chip-icon {
    font-size: calc(1.15em * var(--wb-info-scale, 1));
}

/* --- cards: each chip becomes a bordered tile ------------------------- */

.wb-info-strip--cards .website-header-section-wrap {
    flex: 0 1 auto;
}

.wb-info-strip--cards .website-chip {
    flex-direction: column;
    justify-content: center;
    /* Explicit, not left to the default. A column flex container defaults to
       align-items:stretch, and the icon slot has a definite width, so it would
       be laid out at flex-start - which reads as "icon shoved left" as soon as
       the value text is wider than the icon. */
    align-items: center;
    gap: var(--space-1);
    min-width: calc(7.5rem * var(--wb-info-scale, 1));
    padding: calc(var(--space-4) * var(--wb-info-scale, 1))
             calc(var(--space-5) * var(--wb-info-scale, 1));
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, currentColor 7%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    /* Values wrap freely inside a tile - only the inline strip needs the
       nowrap that header-chips.css sets. */
    white-space: normal;
    text-align: center;
}

.wb-info-strip--cards .website-chip-icon {
    font-size: calc(1.9rem * var(--wb-info-scale, 1));
}

.wb-info-strip--cards .website-chip-label {
    font-size: calc(var(--font-size-xs) * var(--wb-info-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wb-info-strip--cards .website-chip-value {
    font-size: calc(var(--font-size-lg) * var(--wb-info-scale, 1));
    font-weight: 600;
}

.wb-info-strip--cards .website-chip[role="button"]:hover,
.wb-info-strip--cards .website-chip[data-bs-toggle="tooltip"]:hover {
    background: color-mix(in srgb, currentColor 13%, transparent);
}

/* --- feature: one chip blown up into a centered panel ----------------- */

/* Feature stacks its chips, so the horizontal axis is the CROSS axis - the
 * shared justify-content align rules above steer the main (vertical) axis and
 * do nothing here. Map the same three align classes onto align-items instead,
 * and let text-align follow so a wrapped value stays with its column. */
.wb-info-strip--feature {
    flex-direction: column;
}

.wb-info-strip--feature.wb-info-strip--align-left,
.wb-info-strip--feature.wb-info-strip--align-left .website-chip {
    align-items: flex-start;
    text-align: left;
}

.wb-info-strip--feature.wb-info-strip--align-center,
.wb-info-strip--feature.wb-info-strip--align-center .website-chip {
    align-items: center;
    text-align: center;
}

.wb-info-strip--feature.wb-info-strip--align-right,
.wb-info-strip--feature.wb-info-strip--align-right .website-chip {
    align-items: flex-end;
    text-align: right;
}

/* The wrap is a plain shrink-to-fit column so align-items above positions the
   real chip, not a full-width box that would make every option look centered. */
.wb-info-strip--feature .website-header-section-wrap {
    display: flex;
}

/* align-items must be set from the strip's own align class, NOT inherited.
   `align-items: inherit` picks up the WRAP's value, and the wrap never sets
   one - so it resolved to `normal` (stretch), which for a fixed-width icon
   slot means flex-start. The icon then hugged the left edge of the widest
   line, drifting further off-centre the longer the value got. */
.wb-info-strip--feature .website-chip {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--space-2) * var(--wb-info-scale, 1));
    padding: 0;
    background: none;
    border: 0;
    white-space: normal;
    text-align: inherit;
}

/* The size that exposed the emoji clipping. The shared slot rules above give
   it a square box and inner padding, so the glyph now has somewhere to
   overshoot into; line art is bounded by its own viewBox and never had the
   problem, which is the second reason the strip defaults to it. */
.wb-info-strip--feature .website-chip-icon {
    font-size: calc(4.5rem * var(--wb-info-scale, 1));
    /* Slightly roomier than the shared 1.25em: at this size even the padded
       emoji box benefits from the extra breathing room, and the builder's
       auto-height preview measures this box. */
    width: 1.32em;
    height: 1.32em;
    margin-bottom: calc(var(--space-1) * var(--wb-info-scale, 1));
}

.wb-info-strip--feature .website-chip-label {
    font-size: calc(var(--font-size-2xl) * var(--wb-info-scale, 1));
    font-weight: 600;
    opacity: 1;
    order: 2;
}

.wb-info-strip--feature .website-chip-value {
    font-size: calc(var(--font-size-lg) * var(--wb-info-scale, 1));
    font-weight: 400;
    opacity: 0.75;
    order: 3;
}

.wb-info-strip--feature .website-chip[role="button"]:hover,
.wb-info-strip--feature .website-chip[data-bs-toggle="tooltip"]:hover {
    background: none;
}

/* ---- builder-only diagnostic --------------------------------------------
 * Emitted by InfoStripSectionWidget::renderChipDiagnostic() when a chip has
 * nothing to compute (no coordinates, no target date). Edit mode only - it
 * never reaches the public site. Kept visually quiet and always inline, so
 * the cards/feature layouts do not blow it up into a headline.
 */
.wb-info-strip .wb-info-strip-diagnostic {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
    opacity: 0.7;
}

.wb-info-strip .wb-info-strip-diagnostic .website-chip-icon {
    font-size: 1em;
}

/* ============================================================== responsive */

@media (max-width: 575.98px) {
    /* Tiles go full-width rather than squeezing two per row and clipping
       longer values like "06:12 / 20:41". */
    .wb-info-strip--cards .website-header-section-wrap {
        flex: 1 1 100%;
    }

    .wb-info-strip--cards .website-chip {
        width: 100%;
    }

    .wb-info-strip--gap-lg {
        --wb-info-gap: var(--space-4);
    }

    .wb-info-strip--feature .website-chip-icon {
        font-size: calc(3.25rem * var(--wb-info-scale, 1));
    }
}