/* =============================================================================
   sol-v11.css - the solution pages in the homepage's v11 design.

   Markup: app/server/views/frontend/v4/_sol_v11.pug (a copy of the homepage
   partial), data config/v4/sol/<page>.js, view v4/sol_page.pug. The pages load
   the homepage's own sheets (home-v4.css under body.hv, home-v11.css under
   body.hv-v11), so this file holds only what the v4 page shell needs on top.
   Every rule sits under body.v4-sol. Raw: the route hands the file's mtime as
   ?v=, so an edit rotates it.
   ============================================================================= */

/* The v4 shell puts a spacer under the header; the homepage's hero frame
   starts 8px under the window's top with the header floating over it. */
html:root body.v4-sol .v10-navspacer { display: none; }

/* The tab panel on a phone. The homepage's grid is three columns; a page with
   five tabs would leave a hole in the second row, so the last two tabs share
   it (six columns, each tab two wide, the last pair three wide). */
@media (max-width: 699.98px) {
    html:root body.v4-sol .h11-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    html:root body.v4-sol main button.h11-tab { grid-column: span 2; }
    html:root body.v4-sol main button.h11-tab:nth-child(4):nth-last-child(2),
    html:root body.v4-sol main button.h11-tab:nth-child(5):nth-last-child(1) { grid-column: span 3; }
}

/* Result row height from the row's own width (--fit, set per tab in the
   markup): the homepage's 2.95 suits 4:5 + 1:1 + 9:16; three squares or a wide
   16:9 ad need a lower row to stay inside the panel. */
html:root body.v4-sol .h11-pane-flow > * { --oh: min(320px, calc((100cqi - 100px) / var(--fit, 2.95))); }

/* Four tabs on a phone sit two and two (the brand assets page); two tabs share
   one row; one tab takes the row. */
@media (max-width: 699.98px) {
    html:root body.v4-sol main button.h11-tab:first-child:nth-last-child(4),
    html:root body.v4-sol main button.h11-tab:first-child:nth-last-child(4) ~ button.h11-tab,
    html:root body.v4-sol main button.h11-tab:first-child:nth-last-child(2),
    html:root body.v4-sol main button.h11-tab:first-child:nth-last-child(2) ~ button.h11-tab { grid-column: span 3; }
    html:root body.v4-sol main button.h11-tab:only-child { grid-column: 1 / -1; }
}

/* The Geist Pixel phrase in a section title never breaks across two lines
   ("Reels, / TikTok" read as two ideas). The longest one is about 275px at
   the 24px phone size. */
html:root body.v4-sol main .v4-h2 .v4-pixel { white-space: nowrap; }

/* Captions on video results stay on a phone too: the captions tab of the
   video pages is about them (home-v11.css hides them below 700px). */
@media (max-width: 699.98px) {
    html:root body.v4-sol main span.h11-out-cap { display: block; left: 4px; right: 4px; bottom: 8%; padding: 3px 4px; border-radius: 5px; font-size: 9px; line-height: 1.25; }
}

/* The line of sibling use cases under the "Also for" line. */
html:root body.v4-sol main p.h11-also.sol-more { margin-top: 8px; }