/* ==========================================================================
   Background
   Shared authored background for refresh sections: solid colour, two-stop
   gradient, image or looping video, with an optional dark scrim.

   Paired with:
     /apps/marvell-com/components/refresh/shared/background/fields   (dialog)
     /apps/marvell-com/components/refresh/shared/background/background.html
     com.marvell.website.core.models.refresh.RefreshBackgroundModel

   The gradient function lives here rather than in the HTL because it has to:
   HTL's styleToken filter blanks any value whose function arguments contain a
   hex colour, so a server-composed linear-gradient(...) never survives. The
   component emits only validated atoms (a colour, an angle) as custom
   properties, which do pass unchanged.

   The var() fallbacks below cover the case where a property is not emitted at
   all. They do NOT cover an emitted-but-empty property, which sets an empty
   token stream instead of leaving the property unset -- so treat them as
   defaults, not as a safety net.
   ========================================================================== */

/* Host section. The class is doubled to reach specificity (0,2,0) so it beats a
   component's own single-class band colour — e.g. .mrvll-stats — no matter which
   stylesheet loads first, without needing !important.

   background-image is cleared alongside the colour: a component's default band can
   be painted either way — .mrvll-scale-panels uses a linear-gradient wash — and an
   authored background is meant to replace it, not sit under it. */
.mrvll-has-bg.mrvll-has-bg {
  position: relative;
  isolation: isolate;
  background-color: transparent;
  background-image: none;
}

/* The layer sits behind the host's content, not under a lifted content stack.

   The earlier approach lifted every child with `.mrvll-has-bg > *:not(.mrvll-bg) {
   position: relative }`, which silently broke any child the component had already
   positioned — .mrvll-scroll-hint in scale-panels is position:absolute at desktop,
   same (0,2,0) specificity, and this stylesheet loads last, so it won.

   A negative z-index needs the host to be a stacking context or the layer escapes
   behind the page; `isolation: isolate` above guarantees that. Static children then
   paint above the layer with no rule of their own, and positioned children keep the
   position their component gave them. */
.mrvll-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.mrvll-bg--color {
  background-color: var(--mrvll-bg-color, transparent);
}

.mrvll-bg--gradient {
  background-image: linear-gradient(
    var(--mrvll-bg-angle, 135deg),
    var(--mrvll-bg-from, #0072ce),
    var(--mrvll-bg-to, #212322)
  );
}

.mrvll-bg .mrvll-bg__image,
.mrvll-bg .mrvll-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The video stacks over the poster image so reduced-motion can fall back to the still. */
.mrvll-bg .mrvll-bg__video {
  z-index: 1;
}

.mrvll-bg .mrvll-bg__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #000;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mrvll-bg .mrvll-bg__video {
    display: none;
  }
}

/* ==========================================================================
   Text colour
   Honours the shared background fragment's Text Colour field, for every
   component that adopts a Background tab.

   Lives in clientlib-refresh-aem, not in clientlib-refresh/css/components/,
   for two reasons:
     - clientlib-refresh is regenerated from the externally synced ui.frontend,
       so a rule added there is lost on the next sync.
     - marvell-com.refresh.aem is loaded after marvell-com.refresh (see
       components/structure/page/customheaderlibs.html), so these rules win
       against the components' own colours.

   WHY A CURATED LIST RATHER THAN ONE BLANKET RULE
   A generic ".mrvll-has-text *" would be simpler and would break buttons:
   .mrvll-button sets no colour of its own and its variants are only (0,1,0),
   so any descendant rule at (0,2,0) or above captures them and destroys the
   white-on-blue primary and the brand-blue outline. Authored links inside
   .cmp-text are not enumerated anywhere either. So each component names its
   own text wrappers, and links, buttons, tabs and arrows are never selected.

   EVERY SELECTOR IS ANCHORED ON THE COMPONENT ROOT, on the same element as
   the gate class. That is what stops a band's colour reaching a nested card:
   a stat card only recolours when the ARTICLE itself carries mrvll-has-text,
   not when its band does.

   The gate class is also what makes "unset" safe: an unset colour still
   renders --mrvll-text-color as an empty token stream, and var(--x, fallback)
   does NOT fall back for an empty value.

   The .cmp-text / .cmp-title children inside each wrapper are already
   color: inherit in the base CSS, so setting the wrapper is enough.

   NOTE: icons do not follow. There is no currentColor and no inline SVG in
   these components -- every icon is a DAM <img> -- so white copy leaves a dark
   PNG icon stranded and the author has to swap the asset.
   ========================================================================== */

/* Stats band. Its cards are excluded by the anchor above: each card has its
   own fragment instance and its own Text Colour. */
.mrvll-stats.mrvll-has-text .mrvll-stats__eyebrow,
.mrvll-stats.mrvll-has-text .mrvll-stats__title,
.mrvll-stats.mrvll-has-text .mrvll-stats__lead {
  color: var(--mrvll-text-color);
}

/* Stats card. */
.mrvll-stats-card.mrvll-has-text .mrvll-stats-card__value,
.mrvll-stats-card.mrvll-has-text .mrvll-stats-card__text {
  color: var(--mrvll-text-color);
}

/* Scale panels band: its own copy only -- the intros and the scroll hint. The
   panels are excluded by the anchor above, exactly as stats cards are: each
   panel has its own fragment instance and its own Text Colour, and it sits on
   its own surface, so a colour picked to work over the band is rarely the one
   the panel needs.

   .mrvll-section-intro is shared markup, also rendered by news and portfolio.
   Anchoring on .mrvll-scale-panels is what keeps those two untouched. Careful
   if portfolio ever gets a Background tab: its --inverse and --portfolio
   modifiers are (0,2,0) and these rules are (0,3,0), so they would win. */
.mrvll-scale-panels.mrvll-has-text .mrvll-section-intro__eyebrow,
.mrvll-scale-panels.mrvll-has-text .mrvll-section-intro__title,
.mrvll-scale-panels.mrvll-has-text .mrvll-section-intro__body,
.mrvll-scale-panels.mrvll-has-text .mrvll-scroll-hint {
  color: var(--mrvll-text-color);
}

/* Scale panel card. */
.mrvll-scale-panel.mrvll-has-text .mrvll-scale-panel__eyebrow,
.mrvll-scale-panel.mrvll-has-text .mrvll-scale-panel__body {
  color: var(--mrvll-text-color);
}

/* ==========================================================================
   Scale panel fit
   How a panel card sizes its diagram and itself.

   Lives in clientlib-refresh-aem because scale-panel.css exists as SIX
   byte-identical copies (components/ and flat, across clientlib-refresh and
   ui.frontend src/dist) and css.txt loads two of them. Patching one would
   leave five stale; patching all six is churn the next external UI sync
   discards anyway. marvell-com.refresh.aem loads after marvell-com.refresh,
   so the same selectors here win at equal specificity.

   FULL-WIDTH DIAGRAM, NO SIDE SPACE
   Two things put space beside the artwork:

   1. The card pads 15px (51px desktop) on each side, insetting the diagram.
      Negative margins cancel that padding for the diagram only.

   2. The slot was a locked aspect-ratio box with object-fit: contain. Whenever
      the authored asset's ratio did not match the box, `contain` fitted it on
      the tighter axis and centred it, leaving bands on the other two sides.
      Locking the box to ANY single ratio just moves the problem to whichever
      assets do not match it.

   So the box no longer has a ratio of its own: the image fills the width and
   its own proportions set the height. No letterboxing is possible, on any
   asset, because there is no spare box to letterbox into.

   TRADE-OFF, deliberately accepted: the original CSS locked the slot so that
   "swapping authored assets cannot change card height". That is now false --
   a taller asset makes a taller card. The row is `align-items: stretch`, so
   cards in a line still match each other; it is the line's height that now
   follows the tallest artwork.
   ========================================================================== */

.mrvll-scale-panel .mrvll-scale-panel__diagram {
  display: block;
  width: auto;
  margin-right: -15px;
  margin-left: -15px;
  aspect-ratio: auto;
}

/* The base CSS stretches these to the box height. With no box to fill, they
   hug the image instead. */
.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image,
.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image__link,
.mrvll-scale-panel .mrvll-scale-panel__diagram .mrvll-image-wrap,
.mrvll-scale-panel .mrvll-scale-panel__diagram picture {
  height: auto;
}

.mrvll-scale-panel .mrvll-scale-panel__diagram .cmp-image__image,
.mrvll-scale-panel .mrvll-scale-panel__diagram .mrvll-image-wrap img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   NO BODY, NO RESERVED HEIGHT
   min-height (380px, 640px desktop) held the card open for copy that an
   image-only panel does not have.

   (0,2,0) beats the base .mrvll-scale-panel (0,1,0) at BOTH breakpoints, and
   media queries add no specificity, so one rule covers mobile and desktop.

   :has() is already used across this codebase (cta-band, header, stats-card).
   Where it is unsupported the whole rule drops and the card keeps today's
   behaviour.

   NOTE this only shortens a line of panels that are ALL bodiless. The row is
   `align-items: stretch`, so a bodiless panel beside one with copy still
   stretches to match its sibling -- which is what keeps a row of cards
   aligned.
   -------------------------------------------------------------------------- */

.mrvll-scale-panel:not(:has(.mrvll-scale-panel__body)) {
  min-height: 0;
}

@media (min-width: 1025px),
       (min-width: 801px) and (orientation: landscape) {
  .mrvll-scale-panel .mrvll-scale-panel__diagram {
    margin-right: -51px;
    margin-left: -51px;
  }
}

/* --------------------------------------------------------------------------
   IMAGE-ONLY PANEL -- CARD HUGS THE IMAGE (card height = image height)
   When a panel has neither an eyebrow (empty label) nor a body (empty body),
   the diagram is the only content. The image keeps its natural aspect ratio
   (full width, height follows the asset -- never stretched, never cropped) and
   the card sizes to the image instead of the other way around:

   - min-height: 0 and padding: 0 so the card is exactly the image height (no
     reserved copy height, no top/bottom band around a short banner).
   - align-self: flex-start opts this card out of the panels row's
     align-items: stretch, so a taller sibling no longer stretches this card and
     leaves the grey background showing below the image.

   The diagram and image otherwise keep the base "fit" defaults (width: 100%,
   height: auto). The (0,3,0)/(0,4,0) selectors beat the "no body" (0,2,0) and
   base/fit diagram rules; where :has() is unsupported the rule drops and the
   card keeps today's behaviour.
   -------------------------------------------------------------------------- */

.mrvll-scale-panel:not(:has(.mrvll-scale-panel__eyebrow)):not(:has(.mrvll-scale-panel__body)) {
  align-self: flex-start;
  min-height: 0;
  padding: 0;
}

.mrvll-scale-panel:not(:has(.mrvll-scale-panel__eyebrow)):not(:has(.mrvll-scale-panel__body)) .mrvll-scale-panel__diagram {
  margin: 0;
}