/* Mobile and tablet pass (Kevin 2026-11-01): proportions below the 981px desktop layout. Loaded last on corporate
   templates, so it only adjusts sizes already defined in home*.css, surfaces.css and rapid-hub-visuals.css; desktop is
   unchanged. Kept: the fixed "On this page" tab (Kevin prefers it as is). */

/* Cover cards in two-column grids (home consulting routes from 701px) keep one column until desktop: inside a ~340px
   card the side cover left about 100px for the title and broke words mid-line. */
@media (max-width: 980px) {
    .cv-cro-routes:has(> .cv-v1-service--cover) { grid-template-columns: minmax(0, 1fr); }
}

/* Phones (same breakpoint as case cards): covers become a slim column on the left (like desktop) instead of a full-width 2:1 band on top of every card,
   which made a list of six cards six screens long. The artwork stays uncropped (contain) on its own flat color. */
@media (max-width: 575px) {
    .cv-v1-service--cover { grid-template-columns: 88px minmax(0, 1fr); align-items: stretch; }
    .cv-v1-service-cover { align-self: stretch; height: 100%; aspect-ratio: auto; border-radius: 15px 0 0 15px; }
    /* The cover already carries the visual, so the heading icon gives its width back to the title. */
    .cv-v1-service--cover .cv-v1-card-heading > svg { display: none; }
}
@media (max-width: 575px) {
    :is(.cv-v1-industry:has(> .cv-v1-industry-image), .cv-case:has(> .cv-case-image)) { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: stretch; }
    :is(.cv-v1-industry, .cv-case) > :is(.cv-v1-industry-image, .cv-case-image) { height: 100%; aspect-ratio: auto; object-position: center top; border-radius: 15px 0 0 15px; }
    :is(.cv-v1-industry:has(> .cv-v1-industry-image), .cv-case:has(> .cv-case-image)) .cv-v1-card-heading > svg { display: none; }
    /* The home's own phone rule (home-v2.css) sets these covers to height: auto; keep them full card height there too. */
    .cv-home-v2 :is(.cv-work-band .cv-case > .cv-case-image, .cv-v1-industry > .cv-v1-industry-image) { align-self: stretch; height: 100%; max-width: none; }
}

/* The inquiry photo (a 2:3 portrait frame, about 600px tall on a phone) becomes a short band above the form on phones
   and tablets. Only the frame changes: the photo still covers it with its parallax depth, and the centered message in
   the artwork stays inside the crop. */
@media (max-width: 980px) {
    .cv-inquiry-image:has(> .cv-image-depth) { aspect-ratio: 16 / 10; max-height: 320px; }
}

/* Phones: badges, tags, dates and diagram labels were 10.5-11px; 12px is the floor for readable small text. It is a floor
   over many per-section badge rules (rapid-hub-visuals.css, case-studies.css, learn.css), hence !important. */
@media (max-width: 700px) {
    main :is(.cv-badge-icon, .cv-v1-icon-badges > li, .cv-v1-tags > :is(span, li), .cv-case-catalog-badges > li, .cv-case-skills > span, .cv-visual-outcome-badge, .cv-convergence-badge),
    main :is(.cv-badge-icon, .cv-v1-icon-badges > li, .cv-v1-tags > :is(span, li), .cv-case-catalog-badges > li, .cv-case-skills > span) :is(span, time) { font-size: 12px !important; }
}

/* Phones: the Configure / Extend / Build traffic light (and its siblings) keeps its rail but at a phone scale. */
@media (max-width: 700px) {
    .cv-decision-basis { padding-bottom: 20px; }
    .cv-decision-options dl > div { padding: 14px 0 14px 68px; min-height: 0; }
    .cv-decision-options dl > div::before { width: 52px; }
    .cv-decision-signal { left: 12px; width: 28px; height: 28px; border-width: 2px; }
    .cv-decision-options dt { margin-bottom: 4px; }
}

/* Phones: long-form reading size for blog post bodies (the shared editorial copy is 14px). */
@media (max-width: 700px) {
    .cv-native-post .gh-content,
    .cv-native-post .gh-content :is(p, ul:not([class]) > li, ol:not([class]) > li) { font-size: 16px; }
}