/* ── Verb Express Hero ───────────────────────────────────────────────
 * Based on verb-dropzone.css — the dropzone/footer/tooltip/error-state
 * rules below are copied from that block verbatim (root selector renamed)
 * so the real upload interaction keeps its existing look. The layout
 * rules (foreground/copy-column/image-column/logo/copy/cta-dropzone) are
 * new, for the two-column marquee wrapper added around that dropzone.
 * Spec: Resume Create page hero — Figma node 1637:15131/15132/15134/15133
 * Breakpoints follow the Figma devices:
 *   Mobile  <  600px   1-column, image stacked below the copy
 *   Tablet  ≥  600px   2-column, side-by-side (like desktop)
 *   Desktop ≥ 1200px   2-column, fixed-size image
 *   Widescreen ≥ 1680px  same as desktop, content capped at 1600px
 * ------------------------------------------------------------------ */

/* ============================================================
   BASE — light is the default
   ============================================================ */

.verb-express-hero {
  position: relative;
  padding-block: var(--section-padding-l);
  padding-inline: var(--Grid-container-padding-side);
  box-sizing: border-box;
}

main .section .verb-express-hero p {
  margin: 0;
}

/* ============================================================
   MARQUEE LAYOUT — logo/heading/body/CTA column + image column
   ============================================================ */

.verb-express-hero .foreground {
  display: flex;
  flex-direction: column;
  /* row-gap 24px (stacked, mobile) / column-gap 48px (side-by-side,
     tablet+) — matches Figma's content-container gap exactly. */
  gap: var(--spacing-400) var(--spacing-700);
  width: 100%;
}

.verb-express-hero .copy-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
  min-width: 0;
}

/* Figma "logo-headline-subcopy" group — its own 16px gap, distinct from
   the 24px gap between it and the action-group below. */
.verb-express-hero .heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}

/* Figma "cta-dropzone-legal" group — same reasoning as heading-group. */
.verb-express-hero .action-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}

.verb-express-hero .express-logo {
  align-self: flex-start;
  display: block;
  height: 20px;
  margin-inline: 0;
  padding: 0;
  width: auto;
}

.verb-express-hero .copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}

.verb-express-hero .copy :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-900);
  font-family: var(--heading-font-family);
  font-size: var(--heading-font-size-l);
  font-weight: var(--heading-font-weight-extra);
  /* Figma spec: 32px on a 36px heading (tight display leading) — no
     token produces this ratio for --heading-font-size-l. */
  line-height: 32px;
  letter-spacing: -1px;
  margin: 0;
}

.verb-express-hero .copy p {
  color: var(--Alias-content-typography-Body);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  /* Figma spec: 20px on a 16px paragraph — tighter than --body-line-height
     (1.5 / 24px). */
  line-height: 20px;
  margin: 0;
}

.verb-express-hero .cta-dropzone {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
  width: 100%;
}

/* milo's decorateButtons adds .action-area to the CTA's wrapping <p>,
   not .button-container — see acceptance-criteria.md. */
.verb-express-hero .cta-dropzone .action-area {
  width: 100%;
}

.verb-express-hero .cta-dropzone .con-button {
  /* global main a.con-button (styles.css) sets margin + inline-block,
     which breaks a 100%-width button — reset both here. */
  box-sizing: border-box;
  display: block;
  margin: 0;
  text-align: center;
  width: 100%;
}

main .verb-express-hero .cta-dropzone a.con-button.button-xl:any-link {
  /* Hardcoded to match figma - will need to clean up after global button styles are fixed */
  font-size: 18px;
  line-height: 20px;
}

/* Keep the authored primary CTA in Challenger 1 when the mobile fork uses
   the same destination. The global same-fcta rule otherwise hides it. */
.verb-express-hero[data-block-status] .cta-dropzone .action-area a.con-button.same-fcta {
  display: block;
}

/* Figma's "mini dropzone" uses a smaller icon than verb-dropzone's
   full-size 49px widget-icon. */
.verb-express-hero .widget-icon {
  width: 29px;
  height: 29px;
}

.verb-express-hero .widget-icon img {
  width: 29px;
  height: 29px;
}

.verb-express-hero .image-column {
  /* Figma "Img" node: flex-col, justify-center at every breakpoint;
     align-items is flex-start on mobile/tablet, switching to center
     only at desktop (≥1200px, see that media query below). */
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.verb-express-hero .image-column picture {
  aspect-ratio: 58 / 49;
  border-radius: var(--Corner-radius-corner-radius-200);
  box-shadow: var(--Alias-drop-shadow-elevated-key), var(--Alias-drop-shadow-transition), var(--Alias-drop-shadow-ambient);
  display: block;
  overflow: hidden;
  width: 100%;
}

.verb-express-hero .image-column img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* ============================================================
   DROPZONE AREA
   ============================================================ */

.verb-dropzone-area {
  border: none;
  border-radius: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24' ry='24' fill='none' stroke='%23868686' stroke-width='2' stroke-dasharray='4%2C 4'/%3E%3C/svg%3E");
  padding: 21px var(--spacing-400);
  background-color: var(--color-gray-100);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  width: 100%;
  color: var(--c1-text-text);
  font-family: var(--body-font-family);
}

.verb-dropzone-area:hover,
.verb-dropzone-area.dragging,
.verb-express-hero.dragging-block .verb-dropzone-area {
  background-color: var(--color-gray-150);
}

.verb-dropzone-area:focus-visible {
  background-color: var(--color-gray-150);
  outline: 2px solid var(--Alias-content-semantic-accent-key-focus);
  outline-offset: 2px;
}

.verb-express-hero.dragging-block {
  outline: none;
}

.verb-express-hero.dragging-block::before {
  display: none;
}

/* ============================================================
   INNER LAYOUT (icon + content)
   ============================================================ */

.verb-dropzone-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.verb-dropzone-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  text-align: start;
}

/* ============================================================
   HEADING
   ============================================================ */

.verb-dropzone-heading {
  font-family: var(--body-font-family);
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
  color: inherit;
  margin: 0;
  word-break: break-word;
}

/* ============================================================
   SUB LINE — file-type/size limit
   ============================================================ */

.verb-dropzone-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
  color: inherit;
  margin: 0;
  opacity: 0.85;
}

/* ============================================================
   FOOTER — legal + info icon
   ============================================================ */

.verb-dropzone-footer {
  width: 100%;
}

.verb-dropzone-legal p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--Palette-gray-700);
  flex: 1;
}

.verb-dropzone-legal a,
.verb-dropzone-legal .verb-dropzone-legal-url {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: 400;
}

.verb-dropzone-legal a:hover,
.verb-dropzone-legal .verb-dropzone-legal-url:hover {
  color: var(--link-hover-color);
}

/* ============================================================
   INFO ICON + TOOLTIP
   ============================================================ */

.verb-express-hero .info-icon {
  --tooltip-background-color: var(--color-content-neutral);
  --tooltip-text-color: var(--color-white);

  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  margin-inline-start: 4px;
  margin-block-end: 2px;
}

.verb-express-hero .info-icon svg {
  width: 10px;
  height: 10px;
  filter: none;
  color: var(--tooltip-background-color);
}

.verb-express-hero .milo-tooltip {
  position: relative;
  text-decoration: none;
  border-bottom: none;
}

.verb-express-hero .milo-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  margin-left: 7px;
  max-width: 160px;
  padding: 3px 8px 5px 8px;
  border-radius: 5px;
  background: var(--tooltip-background-color);
  color: var(--tooltip-text-color);
  text-align: center;
  display: none;
  z-index: 8;
  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
  width: max-content;
  font-family: var(--body-font-family);
  box-sizing: border-box;
}

.verb-express-hero .milo-tooltip::after {
  content: "";
  position: absolute;
  left: 100%;
  margin-left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: var(--tooltip-background-color);
  display: none;
  z-index: 8;
}

.verb-express-hero .milo-tooltip.top::before {
  left: 50%;
  top: -13px;
  transform: translateX(-50%) translateY(-100%);
  margin-left: 0;
  margin-bottom: 15px;
}

.verb-express-hero .milo-tooltip.top::after {
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-50%);
  border-color: var(--tooltip-background-color) transparent transparent;
  border-right-color: transparent;
  margin-left: 0;
}

.verb-express-hero .milo-tooltip:hover::before,
.verb-express-hero .milo-tooltip:focus::before,
.verb-express-hero .milo-tooltip:hover::after,
.verb-express-hero .milo-tooltip:focus::after {
  display: block;
}

/* ============================================================
   UTILITY
   ============================================================ */

.verb-express-hero .hide {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   DRAG OVERLAY — full-viewport, shown when files dragged over page
   ============================================================ */

.verb-dropzone-drag-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 70%);
  backdrop-filter: blur(47px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 50;
}

.verb-dropzone-drag-overlay.is-dragging {
  opacity: 1;
}

.verb-dropzone-drag-icon {
  width: 65px;
  height: 65px;
  color: var(--color-gray-950);
}

.verb-dropzone-drag-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.verb-dropzone-drag-text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-950);
}

/* ============================================================
   ERROR STATE
   ============================================================ */

.verb-express-hero .error.hide {
  display: none;
  position: absolute;
  clip: unset;
}

.verb-dropzone-error {
  cursor: default;
  background: #D31510;
  max-width: calc(100% - 32px);
  color: var(--color-white);
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 14px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  z-index: 5;
}

.verb-dropzone-error-text {
  border-right: 1px solid rgb(255 255 255 / 20%);
  font-size: 12px;
  padding: 0 12px 0 0;
  margin: 0 6px 0 6px;
  max-width: none;
  min-width: auto;
}

.verb-dropzone-errorBtn {
  align-self: flex-start;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: block;
  background: none;
  border: none;
  outline: none;
}

.verb-dropzone-errorIcon {
  align-self: flex-start;
  width: 16px;
  height: 16px;
  margin: 5px 2px 0 6px;
  flex-shrink: 0;
}

.verb-dropzone-errorIcon::after {
  content: '';
  background-image: url('/express/code/icons/alert.svg');
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

/* ============================================================
   TABLET — ≥ 600px
   ============================================================ */

@media screen and (min-width: 600px) {
  /* Figma fixes the CTA + dropzone column to 335px starting at tablet,
    even when the copy column above it is wider — mobile stays w-full.
    No token for this one-off width. */
  .verb-express-hero .cta-dropzone {
    max-width: 335px;
  }

  .verb-express-hero .image-column picture {
    aspect-ratio: 59 / 52;
  }

  .verb-dropzone-error {
    max-width: 435px;
    padding: 8px;
  }

  .verb-dropzone-error-text {
    font-size: 14px;
    padding-right: 16px;
    margin-right: 8px;
    margin-left: 8px;
    max-width: 324px;
    min-width: 100px;
  }

  .verb-dropzone-errorIcon {
    width: 18px;
    height: 18px;
    margin: 7px 4px 0 8px;
  }

  .verb-dropzone-errorIcon::after {
    width: 18px;
    height: 18px;
  }

  .verb-dropzone-errorBtn {
    width: 32px;
    height: 32px;
  }
}

/* ============================================================
   CUSTOM TABLET — ≥ 688px
   ============================================================ */

@media screen and (min-width: 688px) {
  .verb-express-hero .foreground {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .verb-express-hero .copy-column {
    flex: 1 1 0;
    min-width: 0;
  }

  .verb-express-hero .image-column {
    flex: 1 1 0;
    min-width: 0;
  }
}


/* ============================================================
   DESKTOP — ≥ 1200px
   ============================================================ */

@media screen and (min-width: 1200px) {
  .verb-express-hero {
    padding-block: var(--section-padding-s);
  }

  .verb-express-hero .copy-column {
    flex: 1 1 0;
    max-width: 553px;
  }

  .verb-express-hero .image-column {
    align-items: center;
    flex: 1 1 0;
  }

  .verb-express-hero .image-column picture {
    max-width: 668px;
    width: 543px;
    aspect-ratio: 543 / 479;
  }
}

/* ============================================================
   WIDESCREEN — ≥ 1680px
   ============================================================ */

@media screen and (min-width: 1680px) {
  .verb-express-hero .foreground {
    margin-inline: auto;
    max-width: 1600px;
  }
}