/**
 * Homepage, phone-sized.
 *
 * Sixteen sections is the right amount of homepage on a desktop, where three
 * cards sit side by side and the eye takes a row at a glance. On a 375px
 * phone every one of those rows unstacks into a column and the page measured
 * 13,228px — sixteen full screens of thumb-scrolling before the footer. The
 * content is not the problem; the stacking is.
 *
 * So nothing here hides a section or deletes a word. Three things happen:
 *
 *   RAILS      Card grids that unstack into a column become a horizontal
 *              swipe rail instead. Three guide cards stop being 1,493px of
 *              column and become one 500px row the thumb flicks through,
 *              which is how the product sliders on this same page already
 *              behave — vk-bj and vk-pg ship their own sliders, so this is
 *              the page's existing idiom, not a new one.
 *
 *   TRUNCATION Long prose blocks clamp to a few lines behind a "Read more".
 *              The full text stays in the DOM, so it is still indexed and
 *              still reachable; it just stops being a 371px wall the reader
 *              has to scroll past to reach the shop.
 *
 *   BREATHING  Section padding built for a desktop rhythm (48-64px top and
 *              bottom, thirteen times over) comes down to 32px.
 *
 * Everything is inside a max-width:767px query, so the desktop layout is
 * untouched. Selectors lead with .vk-home to out-specify the per-section
 * files without needing !important or a particular load order.
 *
 * The FAQ trim and the "Read more" controls are in js/sections/vk-home-mobile.js;
 * the classes it toggles are styled at the bottom of this file.
 */

@media (max-width: 767px) {

  /* ---- Rails ------------------------------------------------------------
     A rail is the same three cards, turned ninety degrees. scroll-snap makes
     each flick land on a card edge; scroll-padding keeps the snapped card
     clear of the 16px gutter rather than flush against the screen edge. The
     negative margin lets the rail bleed to both edges so a half-visible next
     card signals "there is more", which a padded-in rail hides. */
  .vk-home .vk-latest-guides__grid,
  .vk-home .vk-cc__grid,
  .vk-home .vk-bg__grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-bottom: 4px;
    gap: 12px;
    scrollbar-width: none;
  }

  .vk-home .vk-latest-guides__grid::-webkit-scrollbar,
  .vk-home .vk-cc__grid::-webkit-scrollbar,
  .vk-home .vk-bg__grid::-webkit-scrollbar { display: none; }

  .vk-home .vk-latest-guides__grid > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  /* Brand cards are half-width tiles, so two and a bit fit per screen. */
  .vk-home .vk-bg__grid > * {
    flex: 0 0 43%;
    scroll-snap-align: start;
  }

  /* Six category chips in two columns is three rows of tiles that each say
     one short thing. As a rail it is one row, and the chips keep the size
     that makes them comfortable to tap. */
  .vk-home .vk-cc__grid > * {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }

  /* A card in a rail cannot stretch to a row's tallest sibling any more, so
     the ones with shorter copy would end up ragged. A floor keeps their
     bottoms level without capping the tallest. */
  .vk-home .vk-bg__grid > * { min-height: 265px; }
  .vk-home .vk-cc__grid > * { min-height: 118px; }

  /* The hero subtitle ran to six lines, pushing the two shop buttons — the
     only thing in the hero that goes anywhere — off the first screen. Four
     lines keeps the promise and puts the buttons back above the fold. */
  .vk-home .vk-hero-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
            line-clamp: 4;
    overflow: hidden;
  }

  /* ---- Prose ------------------------------------------------------------
     Clamped blocks get a class from the JS; these are the two states. The
     fade is drawn with a mask rather than a gradient overlay so it works on
     any background without having to know which section it is in. */
  .vk-home .vk-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }

  .vk-home .vk-clamp--4 { -webkit-line-clamp: 4; line-clamp: 4; }
  .vk-home .vk-clamp--6 { -webkit-line-clamp: 6; line-clamp: 6; }

  .vk-home .vk-clamp.is-open {
    -webkit-line-clamp: unset;
            line-clamp: unset;
    display: block;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* ---- The control the JS inserts --------------------------------------
     One button shape for "Read more" and "Show all 17 questions" alike. It is
     a real <button>, so it is focusable and announces its state. */
  .vk-home .vk-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 16px;
    border: 1px solid var(--vk-border-2);
    border-radius: var(--vk-radius-pill);
    background: transparent;
    color: var(--vk-accent);
    font-family: var(--vk-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
  }

  .vk-home .vk-more:focus-visible {
    outline: 2px solid var(--vk-accent);
    outline-offset: 2px;
  }

  /* The chevron turns over when the block opens. */
  .vk-home .vk-more__chev {
    display: inline-block;
    transition: transform .18s ease;
  }
  .vk-home .vk-more[aria-expanded="true"] .vk-more__chev { transform: rotate(180deg); }

  /* A "Show all questions" button belongs under the list, centred, not
     hanging off the left edge of the last answer. */
  .vk-home .vk-faq__wrap .vk-more {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 14px;
  }

  /* Items the JS folds away. Kept in the DOM — hidden, not removed — so the
     text is still indexed and still there when the button is pressed. */
  .vk-home .vk-faq__item.vk-folded,
  .vk-home .vk-faq__group-label.vk-folded { display: none; }

  /* ---- Rhythm -----------------------------------------------------------
     Desktop section padding runs 48-64px top and bottom. Across thirteen
     sections that is over 1,200px of empty page on a phone. */
  .vk-home > section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* The hero and the about block set their spacing inside themselves and
     read as full-bleed panels; overriding their padding would open a gap
     above the fold and under the stat tiles. */
  .vk-home > .vk-hero,
  .vk-home > .vk-ab,
  .vk-home > .vk-tb { padding-top: 0; padding-bottom: 0; }

  /* Section headings carried desktop margins into a tighter page. */
  .vk-home .vk-latest-guides__head,
  .vk-home .vk-bj__head,
  .vk-home .vk-faq__header { margin-bottom: 18px; }

  /* The Texas city list's standfirst ran to five lines above a twelve-tile
     grid that says the same thing. Two lines is the introduction; the grid
     is the content. */
  .vk-home .vk-tx-cities-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    overflow: hidden;
  }
}