/* ── Transparent Image Marquee ──────────────────────────────────────
 * Spec: Font Generator SEO Page — Figma node 3763:178198
 * Breakpoints follow the Figma devices:
 *   Mobile  (S)  <  600px   1-column, image stacked below the text
 *   Tablet  (M)  ≥  600px   2-column that wraps back to 1-column when
 *                           two columns no longer fit (--tim-column-min)
 *   Desktop (L)  ≥ 1200px   2-column with a fixed 787.5px image
 * The image is anchored to the bottom edge of the block (no bottom
 * padding) so the transparent PNG bleeds into the section below.
 * Background color is authored as a single hex; the JS adds `.light` or `.dark`
 * automatically from that color's luminance so text and milo con-button
 * treatments flip to stay readable.
 * ------------------------------------------------------------------ */

.transparent-img-marquee {
  /* Figma-derived layout sizes, named so the shared values stay in sync. */
  --tim-column-min: 387px;         /* min width of each column before it wraps */
  --tim-text-max: 500px;           /* text column cap, 1-column tablet */
  --tim-text-desktop-max: 438px;   /* text column cap, desktop */
  --tim-image-tablet-w: 409.5px;   /* capped image, 2-column tablet */
  --tim-image-tablet-h: 273px;
  --tim-image-desktop-min-w: 600px;
  --tim-image-desktop-w: 787.5px;  /* fixed desktop image (3:2 → 525px tall) */
  --tim-image-desktop-h: 525px;

  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  justify-content: center;
  /* mobile: 40px top, 16px inline, 0 bottom */
  padding: var(--spacing-600) var(--spacing-300) 0;
}

.transparent-img-marquee .foreground {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-500);
  max-width: 1600px;
  width: 100%;
}

.transparent-img-marquee .main-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
  box-sizing: border-box;
  width: 100%;
}

.transparent-img-marquee .text-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

.transparent-img-marquee .text-content .express-logo {
  align-self: flex-start;
  display: block;
  height: 30px;
  margin-inline: 0;
  /* global .icon.icon-adobe-express-logo (styles.css) adds 1rem top/bottom
     padding meant for nav contexts; reset it here so the default (non-white)
     logo variant doesn't add 32px of extra height above the heading. */
  padding: 0;
  width: auto;
}

.transparent-img-marquee .text-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

.transparent-img-marquee .text-container :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-size: var(--Global-Typography-Size-Headings-Heading-2XL);
  font-weight: var(--heading-font-weight-extra);
  line-height: 1.04;
  margin: 0;
}

/* Express web/Body/Body-S — 14px (mobile/tablet), 16px (desktop) */
/* (0,3,1) beats main .section p (0,1,2) */
.transparent-img-marquee .text-content .text-container p {
  color: inherit;
  font-size: var(--body-font-size-s);
  line-height: 1.3;
  margin: 0;
}

/* ── CTAs + disclaimer ──────────────────────────────────────────── */
.transparent-img-marquee .cta-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  align-items: flex-start;
}

.transparent-img-marquee .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-200);
  /* Left-align the buttons under the heading/body; width:100% keeps the row
     constrained to the column so a long CTA wraps/stacks inside it instead of
     shrink-to-fitting past the column into the image. */
  justify-content: flex-start;
  width: 100%;
}

/* milo's decorateButtons wraps each CTA anchor in an .action-area <p>; strip its
   default block spacing so the flex gap alone controls the layout. */
.transparent-img-marquee .button-group .action-area {
  display: flex;
  max-width: 100%;
  margin: 0;
}

/* Buttons are milo con-buttons (blue/outline, button-l): color + pill shape come
   from styles.css, and the .dark/.light block class flips the treatment. We only
   override sizing so the pill is 40px tall (per design; milo's default is ~36px)
   and long labels wrap + stay inside the column rather than ellipsis-truncating
   (milo's con-button default is overflow:hidden; text-overflow:ellipsis). */
.transparent-img-marquee a.con-button:any-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.transparent-img-marquee .disclaimer {
  color: inherit;
  font-size: var(--body-font-size-s);
  line-height: 1.3;
  margin: 0;
}

/* Mobile: when the CTAs are too long to sit on one line the JS adds .long-cta;
   both buttons then expand to fill the foreground width and stack as equal
   full-width buttons, rather than one full-width + one content-width button. */
@media (max-width: 599px) {
  .transparent-img-marquee .button-group.long-cta .action-area {
    flex: 1 1 100%;
  }

  .transparent-img-marquee .button-group.long-cta a.con-button:any-link {
    width: 100%;
  }
}

/* ── image ──────────────────────────────────────────────────────── */
.transparent-img-marquee .image-container {
  width: 100%;
}

.transparent-img-marquee .image-container picture {
  display: block;
}

/* Image renders at a fixed 3:2 ratio at every breakpoint (per Figma) */
.transparent-img-marquee .image-container img {
  aspect-ratio: 3 / 2;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* Light variant: dark text for a light authored background. Auto-applied by the
   JS from the authored background luminance. The milo con-button rules key off
   the block's .dark/.light class for the button treatment (blue stays blue),
   but milo's default outline con-button fills solid white on a light background,
   so the light variant overrides the secondary CTA below to the SoT "quiet"
   secondary treatment. */
.transparent-img-marquee.light {
  color: var(--color-black);
}

/* Focus ring — shared by every CTA in this block (blue primary + both outline
   secondary variants), pulled from the Figma SoT "Focus Ring Background"
   layer used across S2 buttons: a 2px --color-focus-ring-strong (#4b75ff)
   border offset 2px from the button, with a translucent-white halo
   (11%-opacity) filling the gap in between. box-shadow: none/override on
   each :focus rule below cancels milo's own shared con-button box-shadow
   (styles.css) — those rules still match here, and without this their ring
   would win the cascade for that property since ours replaces box-shadow's
   *value* rather than the whole rule. */
.transparent-img-marquee a.con-button.blue:any-link:focus {
  outline: 2px solid var(--color-focus-ring-strong);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.11);
}

/* Secondary CTA, light variant — per the Figma SoT "Button (Secondary,
   Static black)" component, Style=Outline (the transparent variant, not the
   filled "Style=Fill" one): a real 2px border, transparent at rest, using
   the same opacity ladder as the fill: default 22% (#00000038), hover 15%
   (#00000026), down 12% (#0000001f) border, paired with its own (slightly
   different) background fill per state — default transparent, hover 9%
   (#00000017), down 12% (#0000001f). Text stays a constant 93%-opacity
   black (#000000ed) in every state. Focus reuses the down fill+border (12%)
   and adds the shared ring, offset 2px — same offset as the primary button,
   regardless of this button's own 2px border (milo's base con-button rule
   gives every button, including primary, a 2px border-width already —
   primary's just happens to be background-colored, so there's no reason
   for the two rings to sit at different distances). */
.transparent-img-marquee.light a.con-button.outline:any-link {
  background-color: transparent;
  border-color: #00000038;
  color: #000000ed;
}

.transparent-img-marquee.light a.con-button.outline:any-link:hover {
  background-color: #00000017;
  border-color: #00000026;
  color: #000000ed;
}

.transparent-img-marquee.light a.con-button.outline:any-link:active {
  background-color: #0000001f;
  border-color: #0000001f;
  color: #000000ed;
}

.transparent-img-marquee.light a.con-button.outline:any-link:focus {
  background-color: #0000001f;
  border-color: #0000001f;
  color: #000000ed;
  outline: 2px solid var(--color-focus-ring-strong);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.11);
}

/* Secondary CTA, dark variant — per QA (Julia): "Default state has an outer
   stroke of #FFFFFF at 22% opacity. Hover state maintains same outer stroke
   of #FFFFFF at 22% opacity and has a fill of #FFFFFF at 17% opacity. Focus
   state maintains the same stroke and fill color as above with no fill
   between the outside of the button and the focus ring." So the stroke
   stays a constant 22% (#ffffff38) across default/hover/focus — only the
   fill steps from transparent to 17% (#ffffff2b) on hover, which focus then
   holds too. The focus ring's gap is intentionally empty (no halo) per "no
   fill between the outside of the button and the focus ring" — just the
   ring itself, offset 2px (same offset as the primary button and the light
   variant above — no reason for the two secondary variants or the primary
   button to sit at different distances). Text stays solid white in every
   state. (Down/active — #ffffff1c fill, #ffffff24 stroke — isn't covered by
   this feedback; left at its Figma-sampled value.) */
.transparent-img-marquee.dark a.con-button.outline:any-link {
  background-color: transparent;
  border-color: #ffffff38;
  color: var(--color-white);
}

.transparent-img-marquee.dark a.con-button.outline:any-link:hover {
  background-color: #ffffff2b;
  border-color: #ffffff38;
  color: var(--color-white);
}

.transparent-img-marquee.dark a.con-button.outline:any-link:active {
  background-color: #ffffff1c;
  border-color: #ffffff24;
  color: var(--color-white);
}

.transparent-img-marquee.dark a.con-button.outline:any-link:focus {
  background-color: #ffffff2b;
  border-color: #ffffff38;
  color: var(--color-white);
  outline: 2px solid var(--color-focus-ring-strong);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Tablet (M) ≥ 600px: 2-column that wraps to 1-column ≤ ~853px ── */
@media (min-width: 600px) {
  .transparent-img-marquee {
    align-items: flex-end;
    padding: 0 var(--spacing-500);
  }

  .transparent-img-marquee .foreground {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-300);
  }

  /* Both columns want ≥var(--tim-column-min); flex-wrap drops the image
     below the text once two columns no longer fit. */
  .transparent-img-marquee .main-container {
    flex: 1 1 var(--tim-column-min);
    min-width: var(--tim-column-min);
    justify-content: center;
    padding-block: var(--spacing-600);
    /* Figma: text column gets spacing-900 right padding (gap to the image)
       instead of a fixed max-width cap. */
    padding-inline-end: var(--spacing-900);
    /* text column bottom-aligns with the image on tablet */
    margin-top: auto;
    margin-bottom: 0;
  }

  /* Figma spec (Text-content): max-width 500px. In the 2-column tablet state
     the column's spacing-900 right padding constrains the text before this cap
     is reached; when stacked, the text fills up to 500px. */
  .transparent-img-marquee .text-content {
    max-width: var(--tim-text-max);
  }

  .transparent-img-marquee .image-container {
    flex: 1 1 var(--tim-column-min);
    min-width: var(--tim-column-min);
    align-self: flex-end;
    width: auto;
  }
}

/* ── Tablet 2-column (≥900px, before it wraps to 1-column) ─────────
 * Cap the image at the Figma frame size so it stops growing on wider
 * tablets. The block itself grows to fit the text (taller with CTAs)
 * rather than clipping it. Below this the layout is stacked and left
 * uncapped so the image keeps full-width 3:2. */
@media (min-width: 900px) and (max-width: 1199px) {
  .transparent-img-marquee .image-container {
    max-width: var(--tim-image-tablet-w);
    max-height: var(--tim-image-tablet-h);
  }

  .transparent-img-marquee .image-container img {
    max-height: var(--tim-image-tablet-h);
  }
}

/* ── Desktop (L / XL) ≥ 1200px: fixed 787.5px image ─────────────── */
@media (min-width: 1200px) {
  .transparent-img-marquee {
    padding: 0 var(--spacing-600);
  }

  .transparent-img-marquee .foreground {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--spacing-400);
  }

  .transparent-img-marquee .main-container {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: var(--spacing-900);
    /* desktop uses the text-content max-width cap + foreground gap; no tablet inset */
    padding-inline-end: 0;
    /* text column vertically centers against the image on desktop+ */
    margin: auto;
  }

  .transparent-img-marquee .text-content {
    max-width: var(--tim-text-desktop-max);
  }

  /* Fixed desktop image at 3:2, matching the desktop Figma frame */
  .transparent-img-marquee .image-container {
    flex: 0 0 auto;
    align-self: flex-end;
    min-width: var(--tim-image-desktop-min-w);
    width: var(--tim-image-desktop-w);
    max-height: var(--tim-image-desktop-h);
  }

  .transparent-img-marquee .text-content .text-container p {
    font-size: var(--body-font-size-m);
  }
}