/* Site glue between the AI Agents course hero and the supplied robot component.
 *
 * The other four files in this folder are the designer's handoff, copied in
 * byte-for-byte so a v2 can be dropped over them. Everything site-specific
 * lives here.
 *
 * Scope: every rule is under `.hero.huva-agent-hero`, which only the AI Agents
 * page carries. course_agents.html shares `.clc-page` and the generated
 * course-claude.css with course_claude.html, so an unscoped override here
 * would silently restyle the Claude course's hero too.
 *
 * Breakpoints: the shared course stylesheet flips the hero to its stacked
 * photo layout at 1024px; the component switches at 760px (a container query).
 * Rather than let the two disagree across that 263px band, every property the
 * shared 1024px block sets is restated below inside the component's own
 * breakpoints. `.clc-page .hero.huva-agent-hero X` (0,4,0) outranks the shared
 * `.clc-page X` (0,2,0), and media queries add no specificity, so these win
 * wherever they are declared.
 *
 * Load order: course-claude.css -> robot-materials.css -> huva-agents.css ->
 * huva-mobile-alignment.css -> this file.
 */

/* ── Shell, every width ──────────────────────────────────────────────────
 * The inherited hero is a full-viewport yellow band built around a background
 * photo. The approved design is a short white band whose height comes from
 * the artwork, so the viewport-height and colour rules go.
 */
.clc-page .hero.huva-agent-hero {
  background: #fff;
  min-height: 0;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* `.hero-content` is the layout element (data-huva-hero-layout). The shared
 * stylesheet caps it at 1440px, but the component's cqw units resolve against
 * the full-width hero, so a cap would desync the artwork from the copy on
 * wide screens. */
.clc-page .hero.huva-agent-hero .hero-content {
  width: 100%;
  max-width: none;
  order: 0;
}

/* The approved design keeps the single yellow pill at every width. The three
 * staggered pills the other course designs swap in below 1024px stay off —
 * they also read "2 weeks" against this pill's "4 weeks". */
.clc-page .hero.huva-agent-hero .hero-subtitle {
  display: inline-flex;
}
.clc-page .hero.huva-agent-hero .hero-subtitle-mobile {
  display: none;
}

/* data-huva-actions is a new wrapper around the existing button; the button
 * keeps its own styling and behaviour. */
.clc-page .hero.huva-agent-hero .hero-actions {
  display: flex;
}

/* ── Desktop ─────────────────────────────────────────────────────────────
 * The reference geometry: a 42.6cqw stage with the copy block absolutely
 * placed at 10% / 16.4cqw.
 */
@container huva-hero (min-width: 761px) {
  .clc-page .hero.huva-agent-hero .hero-content {
    height: 42.6cqw;
    padding: 0;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .clc-page .hero.huva-agent-hero .hero-text {
    position: absolute;
    left: 10%;
    top: 16.4cqw;
    z-index: 3;
    gap: 1.5cqw;
    align-items: flex-start;
    text-align: left;
  }

  /* The headline is sized against the artwork, not the viewport.
   *
   * Two reasons the reference's 7.8cqw does not transfer as-is. The site's
   * display face (Noto Sans Armenian, font-stretch: expanded) runs about 18%
   * wider per em than the face the mock was drawn in, and the shared rule is
   * `clamp(3.5rem, 9vw, 7rem)` — a vw clamp, so the headline's size relative
   * to the cqw-scaled robots drifts as the hero grows. 7.3cqw is the largest
   * constant ratio that clears the middle robot, which begins at 67.9% of the
   * hero, across this whole range.
   */
  .clc-page .hero.huva-agent-hero .hero-title {
    font-size: 7.3cqw;
    text-align: left;
  }
  /* The copy block is absolutely placed, so anything in it that does not
   * scale with the hero eventually pushes the CTA out of the bottom of the
   * band. The shared pill is 24px text in 16px padding and the CTA is a fixed
   * 64px, which overflowed below about 1030px. Both now use the reference's
   * cqw values; the CTA keeps a 40px floor so it stays a usable target at the
   * narrow end of this range.
   */
  .clc-page .hero.huva-agent-hero .hero-subtitle {
    padding: .8cqw 1cqw;
    border-radius: .6cqw;
    font-size: 1.58cqw;
    white-space: nowrap;
  }
  .clc-page .hero.huva-agent-hero .hero-cta {
    height: auto;
    min-height: 40px;
    padding: 1.35cqw 2.15cqw;
    border-radius: 4cqw;
    font-size: max(12px, 1.2cqw);
  }
}

/* ── Mobile ──────────────────────────────────────────────────────────────
 * Copy centred above the robots, per the approved mobile draft. The component
 * itself drops into normal flow below the copy at this width.
 */
@container huva-hero (max-width: 760px) {
  /* Top padding is the reference's 52px plus the 53px fixed site header,
   * which floats over the hero — the shared stylesheet's 100px top padding
   * was there for the same reason. Without it the headline sits behind the
   * nav on a phone. */
  .clc-page .hero.huva-agent-hero .hero-content {
    position: relative;
    height: auto;
    padding: 105px 26px 27px;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
  }
  .clc-page .hero.huva-agent-hero .hero-text {
    position: static;
    width: 100%;
    gap: 17px;
    align-items: center;
    text-align: center;
  }
  .clc-page .hero.huva-agent-hero .hero-title {
    font-size: clamp(42px, 8.7cqw, 64px);
    line-height: 1.03;
    text-align: center;
  }
  /* The pill is nowrap at 24px on desktop, which overflows a phone. */
  .clc-page .hero.huva-agent-hero .hero-subtitle {
    max-width: 100%;
    padding: 10px 11px;
    border-radius: 5px;
    font-size: clamp(11px, 2.05cqw, 15px);
    line-height: 1.3;
    white-space: normal;
  }
  .clc-page .hero.huva-agent-hero .hero-cta {
    height: 56px;
  }
}

@container huva-hero (max-width: 430px) {
  .clc-page .hero.huva-agent-hero .hero-content {
    padding: 96px 20px 22px;
  }
  .clc-page .hero.huva-agent-hero .hero-title {
    font-size: clamp(39px, 10.5cqw, 45px);
  }
  .clc-page .hero.huva-agent-hero .hero-subtitle {
    font-size: 11px;
    padding: 10px 9px;
  }
}