/*
  YFL desktop composition.
  Starts above the approved tablet range and scales the complete product system
  in deliberate stages rather than stretching individual sections.
*/
.yfl-heading-compact,
.yfl-mentor-heading-compact,
.yfl-about-heading-compact,
.yfl-desktop-compact-break {
  display: none;
}

@media (min-width: 1181px) {
  html {
    overflow-x: clip;
  }

  body.yfl-page {
    --max: 1240px;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  body.yfl-page .site-header {
    position: sticky !important;
    top: 12px !important;
    left: auto !important;
    width: calc(100% - 24px) !important;
    max-width: var(--max) !important;
    margin: 12px auto 0 !important;
    transform: none !important;
  }

  body.yfl-page .page-shell {
    width: 100%;
    max-width: var(--max) !important;
    padding: 18px 26px 58px !important;
  }

  body.yfl-page .hero-grid {
    margin-top: 14px;
  }

  body.yfl-page .yfl-footer-inner {
    max-width: calc(var(--max) - 52px) !important;
  }

  body.yfl-page section[id] {
    scroll-margin-top: 96px;
  }
}

/*
  Compact desktop is a distinct composition, not a reduced wide-screen layout.
  Keep this range isolated from the approved tablet system and the wide stages.
*/
@media (min-width: 1181px) {
  body.yfl-main-page .yfl-heading-compact,
  body.yfl-about-page .yfl-about-heading-compact,
  body.yfl-detail-page .yfl-mentor-heading-compact {
    display: block;
  }

  body.yfl-main-page .mentor-intro .yfl-heading-default,
  body.yfl-about-page .mentor-intro .yfl-heading-default,
  body.yfl-detail-page .yfl-mentor-heading-desktop {
    display: none;
  }

  body.yfl-main-page .yfl-heading-compact > span,
  body.yfl-about-page .yfl-about-heading-compact > span,
  body.yfl-detail-page .yfl-mentor-heading-compact > span {
    display: block;
  }

  body.yfl-detail-page .mentor-intro h2,
  body.yfl-detail-page .yfl-mentor-intro-card h2 {
    max-width: none !important;
    font-size: 60px !important;
    line-height: .94 !important;
    letter-spacing: -.045em !important;
  }

  body.yfl-page .bl-tier1 {
    padding: 13px 56px !important;
    border-bottom-color: rgba(212, 175, 55, .18) !important;
  }

  body.yfl-page .bl-tier1 > .bl-bar-nav {
    gap: 30px !important;
  }

  body.yfl-main-page .why-start .why-head h2 {
    max-width: 13ch;
    font-size: 68px !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
  }

  body.yfl-about-page .story-section h2 {
    max-width: 15ch !important;
    font-size: 58px !important;
    line-height: .94 !important;
  }

  body.yfl-main-page .mentor-section {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: 20px !important;
    align-items: stretch;
  }

  body.yfl-main-page .mentor-intro {
    padding: 36px 40px !important;
  }

  body.yfl-main-page .mentor-intro h2 {
    max-width: 10ch !important;
    font-size: 68px !important;
    line-height: .86 !important;
    letter-spacing: -.06em !important;
  }

  body.yfl-main-page .mentor-intro p {
    max-width: 36ch;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.5;
  }

  body.yfl-main-page .mentor-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body.yfl-main-page .mentor-large {
    height: 340px !important;
  }

  body.yfl-main-page .mentor-front img {
    height: 206px !important;
  }

  body.yfl-main-page .mentor-body {
    padding: 18px 22px !important;
  }

  body.yfl-main-page .mentor-large h3 {
    font-size: 24px !important;
  }

  body.yfl-main-page .mentor-large .role,
  body.yfl-main-page .mentor-large .alum {
    font-size: 13.5px !important;
  }

  body.yfl-main-page .mentor-back {
    padding: 30px 34px 34px 30px !important;
  }

  body.yfl-main-page .mentor-large .mentor-back p {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }

  body.yfl-about-page .mentor-intro h2 {
    max-width: 9ch !important;
    font-size: 60px !important;
    line-height: .94 !important;
    letter-spacing: -.045em !important;
  }

  body.yfl-about-page .mentor-intro p {
    max-width: 34ch;
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  body.yfl-detail-page #mentors {
    margin-block: 42px !important;
  }

  body.yfl-detail-page .yfl-mentor-intro-card {
    padding: 36px 40px !important;
    margin-bottom: 18px !important;
  }

  body.yfl-detail-page .yfl-mentor-intro-card p {
    margin-top: 14px !important;
  }

  body.yfl-page .testi-navbar {
    justify-content: center !important;
    padding-inline: 0 !important;
  }

  body.yfl-page .testi-dots {
    justify-content: center !important;
    margin-inline: auto !important;
  }

  body.yfl-page .testi-navbtns {
    display: none !important;
  }

  body.yfl-page .application-section h2 {
    max-width: none !important;
    font-size: 54px !important;
    line-height: .96 !important;
  }

  body.yfl-page .yfl-desktop-compact-break {
    display: block;
  }

  body.yfl-detail-page .yfl-application-heading-line {
    display: inline !important;
  }

  body.yfl-detail-page .yfl-application-heading-line:nth-child(3)::after {
    content: "";
    display: block;
  }

  body.yfl-page .yfl-step-title-mobile {
    display: none !important;
  }

  body.yfl-page .yfl-step-title-desktop {
    display: inline !important;
  }

  body.yfl-individual-page .yfl-venture-heading {
    max-width: none !important;
  }

  body.yfl-individual-page .yfl-venture-heading-desktop {
    white-space: nowrap;
  }

  body.yfl-detail-page #mentors > .desktop-mentor-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body.yfl-detail-page .desktop-mentor-card {
    position: relative;
    min-width: 0;
    height: 300px;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    perspective: 1200px;
    cursor: pointer;
  }

  body.yfl-detail-page .desktop-mentor-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
    transform-style: preserve-3d;
  }

  body.yfl-detail-page .desktop-mentor-card:hover .desktop-mentor-inner,
  body.yfl-detail-page .desktop-mentor-card:focus-visible .desktop-mentor-inner,
  body.yfl-detail-page .desktop-mentor-card.is-flipped .desktop-mentor-inner {
    transform: rotateY(180deg);
  }

  body.yfl-detail-page .desktop-mentor-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    background: #fff;
    backface-visibility: hidden;
  }

  body.yfl-detail-page .desktop-mentor-front {
    display: grid;
    grid-template-rows: 178px 1fr;
  }

  body.yfl-detail-page .desktop-mentor-front > img {
    width: 100% !important;
    height: 178px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  body.yfl-detail-page .desktop-mentor-front > div {
    padding: 13px 16px 15px !important;
  }

  body.yfl-detail-page .desktop-mentor-front h3 {
    font-size: 22px !important;
  }

  body.yfl-detail-page .desktop-mentor-front p {
    margin-top: 5px !important;
    font-size: 13px !important;
  }

  body.yfl-detail-page .desktop-mentor-back {
    display: flex;
    align-items: center;
    padding: 22px;
    color: #fffaf1;
    background: var(--ink);
    transform: rotateY(180deg);
  }

  body.yfl-detail-page .desktop-mentor-back p {
    margin: 0;
    font-size: 14px;
    line-height: 1.48;
  }

  body.yfl-pitch-page .yfl-mastery-section {
    padding: 38px 40px !important;
  }

  body.yfl-pitch-page .yfl-mastery-grid {
    gap: 12px !important;
    margin-top: 28px !important;
  }

  body.yfl-pitch-page .yfl-mastery-card {
    min-height: 174px !important;
    justify-content: flex-start !important;
    padding: 22px 20px !important;
  }

  body.yfl-pitch-page .yfl-mastery-card > span {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  body.yfl-pitch-page .yfl-mastery-card > h3 {
    margin: 20px 0 0 !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
  }
}

/*
  Wide monitors use the same approved 1366px desktop composition as one
  proportional system. This mirrors the CFI and SparkLab production approach:
  cards, type, spacing, borders, and imagery keep their relationships instead
  of independently stretching across the larger viewport.
*/
@media (min-width: 1600px) and (max-width: 1799px) {
  html,
  body.yfl-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  body.yfl-page {
    min-height: var(--yfl-wide-doc-height, 100vh);
  }

  body.yfl-page:not(.yfl-wide-artboard) #dc-root {
    width: 1366px !important;
    max-width: none !important;
    margin: 0 !important;
    zoom: var(--yfl-wide-scale, 1);
  }

  body.yfl-page:not(.yfl-wide-artboard) .site-header.yfl-wide-sticky-active {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    width: calc(100% - 24px) !important;
    max-width: var(--max) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 500 !important;
  }
}

body.yfl-page .site-header.bl-programme-autohide-owner {
  transition: transform .22s cubic-bezier(.4,0,.2,1), top .22s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}
body.yfl-page .site-header.bl-programme-autohide-owner.is-scroll-hidden {
  transform: translate3d(0, calc(-100% - var(--bl-programme-tier-top, 12px)), 0) !important;
  pointer-events: none !important;
}
body.yfl-page .site-header.yfl-wide-sticky-active {
  top: var(--bl-programme-tier-top, 12px) !important;
}

/* YFL desktop header family contract: preserve the approved two equal 20px seams and
   let the programme tier follow document motion when returning to the top. */
@media (min-width: 1181px) and (max-width: 1799px) {
  html.bl-header-pilot-program body.yfl-page .page-shell {
    padding-top: 34px !important;
  }

  html.bl-header-pilot-program body.yfl-page .site-header.bl-programme-autohide-owner {
    transition: box-shadow .22s ease !important;
    will-change: auto;
  }
}

/* Native-wide YFL: the content canvas grows with the monitor rather than
   zooming the 1366px export. Readable text measures remain bounded inside it. */
@media (min-width: 1800px) {
  html,
  body.yfl-page {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: clip !important;
  }

  body.yfl-page:not(.yfl-wide-artboard) {
    --max: min(88vw, 3360px);
  }

  body.yfl-page:not(.yfl-wide-artboard) #dc-root {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    zoom: 1 !important;
  }

  body.yfl-page:not(.yfl-wide-artboard) .page-shell {
    width: var(--max) !important;
    max-width: var(--max) !important;
    padding: clamp(24px, 1.8vw, 64px) clamp(32px, 2.2vw, 84px) clamp(72px, 4vw, 140px) !important;
  }

  body.yfl-page:not(.yfl-wide-artboard) .site-header {
    width: var(--max) !important;
    max-width: var(--max) !important;
    padding: clamp(14px, .8vw, 24px) clamp(18px, 1.1vw, 42px) !important;
  }

  body.yfl-page:not(.yfl-wide-artboard) .site-header.yfl-wide-sticky-active {
    position: fixed !important;
    top: var(--bl-programme-tier-top, 12px) !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 500 !important;
  }

  body.yfl-page:not(.yfl-wide-artboard) :is(.hero-card, .subhero, .program-hero, .intro-copy, .finder-panel) {
    padding: clamp(48px, 3vw, 112px) !important;
  }

  body.yfl-page:not(.yfl-wide-artboard) :is(.hero-card, .subhero, .program-hero) h1 {
    font-size: clamp(76px, 4.5vw, 148px) !important;
    line-height: .92 !important;
  }

  body.yfl-page:not(.yfl-wide-artboard) :is(.intro-copy, .section-heading, .programs-section, .application-section, .mentor-intro, .outcomes, .dates-section) h2 {
    font-size: clamp(54px, 2.7vw, 92px) !important;
    line-height: .95 !important;
  }

  body.yfl-page:not(.yfl-wide-artboard) :is(.intro-copy, .section-heading, .programs-section, .application-section, .mentor-intro, .outcomes, .dates-section) p {
    max-width: 66ch;
    font-size: clamp(18px, .85vw, 25px);
    line-height: 1.55;
  }

  body.yfl-page:not(.yfl-wide-artboard) :is(.stats-grid, .program-card-grid, .testimonial-grid, .steps-grid, .compare-grid, .mentor-list, .mini-program-grid, .deliverable-grid, .faq-grid, .why-grid, .outcomes-metrics) {
    gap: clamp(20px, 1.4vw, 48px) !important;
  }
}
