/* =============================================
   BEST VPS PLATFORM — RESPONSIVE / MOBILE STYLES
   Loaded after styles.css. All overrides scoped
   to media queries. Reparenting JS in main.js
   creates .lineup-item__top-row at <=767px to
   group the logo + nudge into the card header.
   ============================================= */

/* NOTE: an earlier version had `html, body { overflow-x: hidden }`
   here as a defensive guard. That was removed because in WebKit
   (Safari / iOS) it silently clips position:fixed elements such as
   the sticky-footer popup, which is exactly the bug we want to avoid.
   Page-level horizontal overflow is prevented at the source instead:
   the comparison table is hidden on mobile, every other section uses
   percentage widths, and `img { max-width: 100% }` (in styles.css) is
   the catch-all for stray oversized images. */

/* ── TABLET (≤ 991px) ── */
@media (max-width: 991px) {
  .footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── MOBILE (≤ 767px) ── */
@media (max-width: 767px) {

  /* Match body padding to actual mobile popup height so the footer
     sits exactly above the popup with no wasted vertical space. */
  body { padding-bottom: 88px; }

  /* Header — tighter, still readable */
  .header__inner { padding: var(--size-150) var(--size-200); height: 56px; }
  .header__logo { height: 22px; }
  .header__button { font-size: 12px; padding: 7px 12px; }

  /* Hero */
  .hero { padding: var(--size-400) 0 0; }
  .hero__wrapper { padding: 0 var(--size-200) var(--size-400); max-width: 100%; }
  .hero__title { font-size: 28px; letter-spacing: -0.6px; }
  .hero__text { font-size: 15px; line-height: 1.6; }

  /* Page padding */
  .page { padding: var(--size-300) var(--size-200) var(--size-700); }

  /* ── LINEUP CARD MOBILE LAYOUT ── (back-to-basics flat rectangle)
     The restructureCardsForMobile() helper in main.js builds the
     top-row in L→R order: logo, rating, ranking number. The labels-row
     (Hostinger only) and the Visit Site button stay in their original
     .lineup-item__rating-wrapper position at the bottom.

     ┌─────────────────────────────────┐
     │ [Logo]      9.9          #1     │  top-row
     │           ★★★★★                  │  (logo L, rating C, number R)
     │         Outstanding              │
     ├─────────────────────────────────┤
     │ Description text                 │  text-wrapper
     │                                  │
     │ ✓ Feature 1     ✓ Feature 2     │  2x2 grid
     │ ✓ Feature 3     ✓ Feature 4     │
     ├─────────────────────────────────┤
     │ [Best overall][Best value]      │  rating-wrapper
     │      [Visit Site →]              │  (Hostinger labels + button)
     └─────────────────────────────────┘
  */
  .lineup-item-wrapper { border-radius: var(--border-radius); }
  .lineup-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  /* TOP ROW: horizontal — logo LEFT, [labels stack][rating] CENTER, number RIGHT.
     `margin-right: auto` on the logo and `margin-left: auto` on the number
     push the outer slots to the edges; the labels stack and rating sit
     together in the middle as natural siblings (Hostinger only — Wix and
     Kamatera have no labels-row, so they centre rating cleanly).
     Logo bumped to 96px wide so the Hostinger H reads at the same visual
     weight as the wider Wix and Kamatera marks. */
  .lineup-item__top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--size-150);
    padding: var(--size-250) var(--size-200);
    border-bottom: 1px solid var(--color-grey-300);
  }
  .lineup-item__logo-wrapper {
    flex-shrink: 0;
    width: 96px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    padding: 2px;
    box-sizing: border-box;
  }
  /* Override desktop sizing — on mobile the wrapper is the slot and each
     provider renders inside with its own optical-weight cap. Targets
     render at roughly the same apparent area (~59×64, ~92×36, ~64×56). */
  .lineup-item__provider-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .lineup-item__provider-logo[alt="Hostinger"] { max-width: 60px; max-height: 64px; }
  .lineup-item__provider-logo[alt="Wix"]       { max-width: 96px; max-height: 36px; }
  .lineup-item__provider-logo[alt="Kamatera"]  { max-width: 72px; max-height: 60px; }
  .lineup-item__separator { display: none; }

  /* Ranking number (right column) — bigger and bolder */
  .lineup-item__nudge-wrapper {
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    margin-left: auto;
  }
  .number { font-size: 40px; line-height: 1; }

  /* Rating block in the centre slot — column layout, prominent number */
  .lineup-item__top-row .rating {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 1;
    min-width: 0;
  }
  .lineup-item__top-row .rating__number {
    font-size: 38px;
    letter-spacing: -1px;
    line-height: 1;
  }
  .lineup-item__top-row .rating__stars-wrapper {
    align-items: center;
    gap: 0;
  }
  .lineup-item__top-row .stars span { font-size: 14px; }
  .lineup-item__top-row .rating__text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  /* Hostinger badges — vertically stacked pills, one above the other,
     sitting immediately to the LEFT of the 9.9 rating inside the top-row.
     JS lifts this element out of its original rating-wrapper position
     and inserts it between the logo and the rating. No border-bottom or
     vertical padding — those would create a stray dividing line inside
     the top-row. */
  .lineup-item__labels-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
    flex-basis: auto;
    width: auto;
    padding: 0;
    border: none;
  }
  .lineup-item__labels-row .label {
    font-size: 10px;
    padding: 3px 8px;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
  }

  /* MIDDLE: description + 2x2 features grid */
  .lineup-item__text-wrapper {
    padding: var(--size-200);
    border-bottom: 1px solid var(--color-grey-300);
    gap: var(--size-150);
  }
  .lineup-item__description {
    font-size: 14px;
    line-height: 1.55;
  }
  /* 2-column grid on mobile — same shape as desktop. Long bullets wrap
     to a second or third line INSIDE their column instead of forcing the
     grid down to a single column. Applies equally to all three providers. */
  .lineup-item__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px var(--size-150);
    margin-top: var(--size-100);
    justify-items: stretch;
  }
  /* Allow bullet phrases to wrap inside their grid cell rather than
     truncating with ellipsis. `align-items: flex-start` keeps the check /
     cross icon pinned to the first line on multi-line wraps. `min-width: 0`
     is essential — without it a grid child refuses to shrink below its
     longest unbroken word, defeating the wrap and forcing horizontal
     overflow on the parent. */
  .lineup-item__list-item {
    align-items: flex-start;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    text-overflow: clip;
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 100%;
    min-width: 0;
  }

  /* BOTTOM: rating-wrapper holds only the Visit Site button on mobile
     (labels-row was lifted to the top section by JS). The button is
     full-width within the wrapper but NOT edge-to-edge — the wrapper's
     16px padding keeps the button inset from the card edges. */
  .lineup-item__rating-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--size-150);
    padding: var(--size-200);
  }
  .lineup-item__rating-wrapper > .button {
    width: 100%;
    border-radius: var(--border-radius-small);
    min-height: 48px;
    font-size: 16px;
    font-weight: 700;
    padding: 12px var(--size-250);
    margin: 0;
    flex-shrink: 0;
  }

  /* Ribbon — allow content to wrap so the long offer line can never
     push the card wider than the viewport on small phones. */
  .ribbon {
    border-radius: 0;
    padding: 9px var(--size-200);
    flex-wrap: wrap;
    gap: 6px;
  }
  .ribbon__content {
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 100%;
  }
  .ribbon__text {
    font-size: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }
  /* Hide the trailing chevron — when the ribbon wraps on mobile it
     ends up floating awkwardly below the offer text. The fire icon
     inside .ribbon__container is left intact (different DOM position). */
  .ribbon > .ribbon__icon {
    display: none;
  }

  /* FAQ — keep full padding for breathing room */
  .faq {
    padding: var(--size-300);
    border-radius: var(--border-radius);
    margin-bottom: var(--size-600);
  }
  .faq__title { font-size: 22px; }
  .faq__toggle { padding: var(--size-200) 0; }
  .faq__question { font-size: 15.5px; }
  .faq__answer { font-size: 14.5px; padding: 0; }
  .faq__item.open .faq__answer { padding-bottom: var(--size-200); }

  /* Editors picks — single column */
  .editors-pick { padding: var(--size-500) 0 var(--size-400); }
  .editors-pick__title { font-size: 24px; margin-bottom: var(--size-300); }
  .editors-pick__content { grid-template-columns: 1fr; gap: var(--size-200); }
  .editors-pick-card { padding: var(--size-300); }
  .editors-pick-card__rating-wrapper {
    flex-direction: row;
    align-items: center;
    height: auto;
  }

  /* Sticky footer — mobile.
     Full-width edge-to-edge ribbon. Drops the desktop translateX(-50%)
     centering shift since the popup is already left:0/right:0. The
     hidden state slides the ribbon down 100% of its height; the visible
     state (JS adds .is-visible after the first lineup card scrolls out
     of view) slides it back up to bottom:0. The CSS transition is
     inherited from the base rule so no duplicate transition declaration
     is needed here. */
  .sticky-footer {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    transform: translateY(100%);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 10px 16px;
    gap: 12px;
    align-items: center;
  }
  .sticky-footer.is-visible {
    transform: translateY(0);
  }
  .sticky-footer__left-side-wrapper {
    flex: 1;
    min-width: 0;
    gap: 12px;
  }
  /* Hostinger H logo — explicit width/height container with object-fit
     so the SVG renders fully without being clipped by a flex-shrunk
     parent. flex-shrink:0 keeps it pinned to the left edge. Slightly
     larger so the logo is clearly readable at the bottom of the page. */
  .sticky-footer__logo {
    flex-shrink: 0;
    width: 52px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .sticky-footer__logo-image {
    width: 52px;
    height: 40px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  .sticky-footer__text {
    flex: 1;
    min-width: 0;
    gap: 2px;
  }
  .sticky-footer__text-badges-wrapper { gap: 6px; }
  .sticky-footer__text-badge .label {
    font-size: 9.5px;
    padding: 2px 6px;
  }
  .mini-rating { font-size: 11px; gap: 2px; }
  .mini-rating img { width: 13px; height: 13px; }
  .sticky-footer__text-title {
    font-size: 12.5px;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .sticky-footer__button-wrapper { flex-shrink: 0; }
  .sticky-footer__button {
    font-size: 13px;
    font-weight: 700;
    padding: 11px 16px;
    min-height: 44px;
    white-space: nowrap;
  }
  .sticky-footer-spacer { height: 0; }

  /* Footer */
  .footer { padding: var(--size-400) 0; }
  .footer__content { display: flex; flex-direction: column; text-align: center; }
  .footer__top {
    flex-direction: column;
    align-items: center;
    gap: var(--size-200);
  }
  .footer__navigation {
    justify-content: center;
    gap: var(--size-200);
  }
  .footer__bottom { align-items: center; justify-content: center; }
  .footer__logo { height: 20px; }

  /* Compare table — hidden on mobile (the lineup cards already carry
     the spec info in a more readable single-column form). */
  .compare-table-section { display: none; }

  /* Best VPS for 2026 — tighter padding and type for small screens */
  .best-vps-2026 {
    padding: var(--size-300);
    margin-bottom: var(--size-600);
  }
  .best-vps-2026::before {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }
  .best-vps-2026__title { font-size: 22px; letter-spacing: -0.5px; }
  .best-vps-2026__lede {
    font-size: 15px;
    padding-bottom: var(--size-300);
    margin-bottom: var(--size-250);
  }
  .best-vps-2026__block {
    padding-left: var(--size-200);
    border-left-width: 2px;
  }
  .best-vps-2026__subtitle { font-size: 17px; }
  .best-vps-2026__block p { font-size: 15px; line-height: 1.7; }

  /* Expert TOC: single column on mobile */
  .expert-toc {
    padding: var(--size-200) var(--size-250);
    margin-bottom: var(--size-400);
  }
  .expert-toc__list {
    grid-template-columns: 1fr;
    gap: 4px 0;
    font-size: 14px;
    padding-left: var(--size-250);
  }

  /* Legal pages — comfortable single-column reading */
  .legal-page {
    padding: var(--size-400) var(--size-200) var(--size-700);
  }
  .legal-page__intro { font-size: 16px; }
  .legal-page__section h2 { font-size: 19px; }
  .legal-page__section p,
  .legal-page__section li { font-size: 15px; }

  /* Provider deep-dive dialog: full-height sheet on mobile */
  .provider-dialog {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: none;
  }
  .provider-dialog__header { padding: var(--size-200); }
  .provider-dialog__title { font-size: 17px; }
  .provider-dialog__body { padding: var(--size-200); }
  .provider-dialog__logo { width: 40px; height: 40px; }

  /* Advertiser disclosure dialog */
  .dialog { padding: var(--size-300); border-radius: var(--border-radius); }
  .dialog__title { font-size: 20px; }

  /* Exit popup CTA — text + chevron on a single line, always.
     The shortened text "Claim 75% OFF" + 18px chevron = ~135px content,
     comfortably under any mobile button width. The wrapping <span>
     keeps the text and the SVG in a clean inline-flex pair. */
  .popup__button {
    white-space: nowrap;
    line-height: 1.2;
    font-size: 16px;
    padding: 14px var(--size-200);
    min-height: 52px;
    gap: 10px;
  }
  .popup__no-thanks {
    margin-top: 4px;
  }

  /* Exit popup — seamless single-card layout on mobile.
     The previous version had `padding: var(--size-200)` on the popup
     itself, which exposed the popup's white background as a visible
     "frame" around the navy logo panel. Setting padding to 0 lets the
     navy panel and the white content panel meet edge-to-edge inside
     the rounded popup, matching the seamless reference design. The
     popup is explicitly centered on every viewport via fixed
     positioning + translate (some Safari versions don't reliably
     center top-layer <dialog> elements via the default margin:auto). */
  .popup[open] {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: calc(100% - 32px);
    max-width: 360px;
    max-height: 90vh;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: var(--border-radius-large);
    background: var(--color-grey-900);
  }
  /* Navy logo panel sits flush at the top of the popup */
  .popup__logo-panel {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--size-200);
    padding: var(--size-250) var(--size-300);
    min-height: 92px;
  }
  /* Hostinger H — explicit height so the SVG always renders. The
     parent has `filter: brightness(0) invert(1)` to render it white
     on the navy background. */
  .popup__logo-panel-img {
    width: 96px;
    height: 60px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
  }
  .popup__logo-panel-badge {
    font-size: 16px;
    padding: 6px var(--size-150);
  }
  /* White content panel sits flush directly below, centered text */
  .popup__content {
    padding: var(--size-300);
    gap: var(--size-100);
    align-items: stretch;
    text-align: center;
  }
  .popup__bald-claim {
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
  }
  .popup__additional-text { text-align: center; }
  .popup__content .label--yellow { align-self: center; }
  /* Close + ad badges sit on top of the navy panel; tighten the dim
     background on the ad badge so it stays readable on navy. */
  .popup__ad-badge {
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, .9);
  }
  .popup__close-button {
    top: 10px;
    right: 10px;
    z-index: 3;
  }
}

/* ── SMALL MOBILE (≤ 480px) ── */
@media (max-width: 480px) {
  .hero__title { font-size: 24px; }
  .ribbon__container { display: none; } /* hide "Limited-Time Offer" label in card ribbon */
  /* Smaller phones: tighten the logo box but keep it prominent.
     Logo + rating still scale comfortably on iPhone SE (320px). Per-
     provider caps scale down ~85% from the standard mobile breakpoint. */
  .lineup-item__logo-wrapper { width: 84px; height: 60px; }
  .lineup-item__provider-logo[alt="Hostinger"] { max-width: 52px; max-height: 56px; }
  .lineup-item__provider-logo[alt="Wix"]       { max-width: 84px; max-height: 32px; }
  .lineup-item__provider-logo[alt="Kamatera"]  { max-width: 64px; max-height: 52px; }
  /* Compact the labels-row pills further so the top-row never wraps */
  .lineup-item__labels-row .label {
    font-size: 9.5px;
    padding: 2px 6px;
  }
  /* Small phones: keep the 2-column layout — long bullet phrases
     ("21+ global data centres", "Custom hardware sliders") wrap to a
     second or third line WITHIN their column rather than collapsing the
     grid to a single column. Tighten font, gap, and icon size so wrapped
     text reads cleanly inside the narrow column on iPhone-SE-class
     screens (320px wide). */
  .lineup-item__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 10px;
  }
  .lineup-item__list-item {
    font-size: 12px;
    line-height: 1.4;
    gap: 6px;
  }
  /* Shrink the check / cross icon a touch so the text column is wider
     and the wrap point falls in a more natural place. */
  .lineup-item__list-item::before {
    width: 14px;
    height: 14px;
    margin-top: 2px;
  }
  .number { font-size: 34px; }
  .lineup-item__top-row .rating__number { font-size: 32px; }
  .lineup-item__top-row .stars span { font-size: 13px; }

  /* Even tighter button on the smallest phones so it shares the row
     with the rating without wrapping */
  .button { font-size: 13px; padding: 10px var(--size-150); }

  .footer__navigation { gap: var(--size-150); flex-direction: column; }

  /* Sticky footer on the smallest screens: keep the logo visible
     (was previously display:none which left the user wondering why
     the Hostinger H was missing). Free up horizontal room by hiding
     just the secondary badges-wrapper and shrinking the logo a touch. */
  .sticky-footer { padding: 10px 12px; gap: 10px; }
  .sticky-footer__logo { width: 44px; height: 36px; }
  .sticky-footer__logo-image { width: 44px; height: 36px; }
  .sticky-footer__text-badges-wrapper { display: none; }
  .sticky-footer__text-title { font-size: 13px; }
  .sticky-footer__button { padding: 11px 14px; font-size: 12.5px; }

  /* Hostinger boost banner — stack on mobile */
  .hostinger-banner__card {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
  }
  .hostinger-banner__divider { display: none; }
  .hostinger-banner__stats { gap: 16px; flex: 1 1 100%; }
  .hostinger-banner__cta { width: 100%; text-align: center; padding: 13px; }
}