/*
 * D-090 (owner, 29 Oct): app-style phone layout for the website, in the look of the new My Account.
 * Owner: "style according to the fit, not a drastic change". So the content and order stay; on phones long stacks
 * become swipeable rows with dots (app-shell.js adds the dots), stats sit in one card, cards get the app's rounded
 * look, and nothing is cut off. Desktop is untouched (everything is inside max-width: 767.98px).
 * Loaded last in head.blade.php; selectors start with "body" so they win over the older page CSS.
 */
@media (max-width: 767.98px) {

  /* ---------- swipeable rows (shared) ---------- */
  /* D-315 (council UX-24): also the rows themselves, not only once app-shell.js has added .cy-hs (no jump after load) */
  body :is(.cy-hs, .icon-row-scaler .icon-row, .calc-column-list, .voices-trust-grid, .ch-grid, .voices-trust-filters) {
    position: relative; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 16px; justify-content: flex-start !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 12px; height: auto; transform: none;
    /* full bleed: from screen edge to screen edge whatever the parent padding, so rows never stop short on the right */
    width: auto; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 4px 16px 10px;
  }
  body :is(.cy-hs, .icon-row-scaler .icon-row, .calc-column-list, .voices-trust-grid, .ch-grid, .voices-trust-filters)::-webkit-scrollbar { display: none; }
  body :is(.cy-hs, .icon-row-scaler .icon-row, .calc-column-list, .voices-trust-grid, .ch-grid, .voices-trust-filters) > * { scroll-snap-align: start; flex: 0 0 auto; }
  .cy-dots { display: flex; justify-content: center; gap: 6px; margin: 6px 0 4px; }
  .cy-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: var(--cy-neutral-300); cursor: pointer; transition: width .35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color .25s; }
  .cy-dots button[aria-current="true"] { width: 20px; background: var(--cy-brand-600); }

  /* ---------- home hero: products as a swipeable row ---------- */
  body .icon-row-scaler { width: auto; max-width: none; margin: 0 0 8px; transform: none; overflow: visible; }
  body .icon-row-scaler .icon-row { grid-template-columns: none; padding-top: 22px; padding-bottom: 12px; }
  /* Owner, 29 Oct: "the hero looks weird". On phones every product card is the same size and sits on one line;
     the featured card (PI) is marked with a soft brand ring instead of being bigger with rays. */
  body .icon-row-scaler .icon-row { align-items: flex-end !important; padding-top: 24px; padding-bottom: 18px; gap: 10px; }
  body .icon-row-scaler .icon-row .feature-card { width: 92px !important; flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; }
  body .icon-row-scaler .icon-row .feature-card .icon-box,
  body .icon-row-scaler .icon-row .feature-card:hover .icon-box { width: 84px !important; height: 84px !important; border-radius: 22px !important; margin: 0 !important; }
  body .icon-row-scaler .icon-row .feature-card .icon-box svg,
  body .icon-row-scaler .icon-row .feature-card:hover .icon-box svg { max-width: 44px !important; max-height: 44px !important; }
  body .icon-row-scaler .icon-row .feature-card .card-label,
  body .icon-row-scaler .icon-row .feature-card:hover .card-label { width: 90px !important; min-height: 38px !important; padding: 4px 6px !important; border-radius: 13px !important; font-size: 11px !important; line-height: 14px !important; }
  /* Owner, 29 Oct: the featured card (PI) is highlighted as on desktop: larger, golden glow, light rays either side.
     OLD (same day): same size as the others with a thin brand ring and no rays. */
  body .icon-row-scaler .icon-row .feature-card.active { width: 112px !important; flex: 0 0 112px; margin: 0 8px; }
  body .icon-row-scaler .icon-row .feature-card.active .icon-box { width: 100px !important; height: 100px !important; border-radius: 24px !important; margin: 0 !important;
    box-shadow: 0 0 14px rgb(255 151 4), 0 0 28px rgba(255, 177, 66, 0.35) !important; }
  body .icon-row-scaler .icon-row .feature-card.active .icon-box svg { max-width: 52px !important; max-height: 52px !important; }
  body .icon-row-scaler .icon-row .feature-card.active .card-label { width: 106px !important; min-height: 40px !important; padding: 5px 8px !important; border-radius: 15px !important; font-size: 12px !important; line-height: 15px !important; }
  body .icon-row-scaler .icon-row .feature-card:not(.active)::before,
  body .icon-row-scaler .icon-row .feature-card:not(.active)::after { display: none !important; }
  body .icon-row-scaler .icon-row .feature-card.active::before,
  body .icon-row-scaler .icon-row .feature-card.active::after { display: block !important; content: ""; position: absolute; top: -10px; width: 22px; height: 50px; z-index: 2;
    background: url("../images/new_ui/rays.svg") center/contain no-repeat; pointer-events: none; }
  body .icon-row-scaler .icon-row .feature-card.active::before { left: -14px; transform: rotate(6.5deg); }
  body .icon-row-scaler .icon-row .feature-card.active::after { right: -14px; transform: scaleY(-1) rotate(173.5deg); }

  /* ---------- trust stats as one card ---------- */
  body .trust-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 8px 0 0; padding: 14px 6px;
    border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--cy-darken-100), 0 12px 24px -18px rgba(0, 0, 0, .3);
  }
  body .trust-stats .trust-stats-row { display: contents; }
  body .trust-stats .trust-stat-item { position: relative; margin: 0; padding: 0 4px; text-align: center; }
  body .trust-stats .trust-stat-item + .trust-stat-item::before,
  body .trust-stats .trust-stats-row-bottom .trust-stat-item:first-child::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: var(--cy-darken-100); }
  body .trust-stats .trust-stat-value { font-size: 15px; line-height: 20px; white-space: nowrap; }
  body .trust-stats .trust-stat-item > :not(.trust-stat-value) { font-size: 11px; line-height: 14px; }

  /* ---------- "India's Largest Doctor Protection Ecosystem" banner: nothing cut off ---------- */
  body .ecosystem-cta-card { height: auto !important; min-height: 240px; border-radius: 20px; overflow: hidden; background-size: auto 100% !important; background-position: -78px bottom !important; }
  body .ecosystem-cta-content { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important;
    z-index: 1; width: auto !important; margin-left: 50%; padding: 22px 16px 22px 0 !important; }
  /* .doctor-ecosystem-cta raises specificity above typography.css h2:not(.cy-heading-free):not(.cy-heading-free *) */
  body .doctor-ecosystem-cta .ecosystem-cta-content h2 { font-size: 18px !important; line-height: 23px !important; }
  /* a red fade behind the text so it reads over the photo */
  body .ecosystem-cta-card { position: relative; }
  body .ecosystem-cta-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(168, 55, 41, 0) 30%, rgba(168, 55, 41, .92) 52%, #a83729 70%); }
  body .ecosystem-cta-content p { font-size: 12px !important; line-height: 16px !important; }
  body .ecosystem-cta-btn { border-radius: 12px; padding: 10px 12px !important; font-size: 14px !important; line-height: 18px !important; text-align: center !important; }

  /* ---------- calculators: each group a swipeable row of small cards ---------- */
  body .calc-column-viewport { height: auto !important; overflow: visible !important; }
  body .calc-column-list { flex-direction: row !important; transform: none !important; }
  body .calc-column-list .calc-card { flex: 0 0 150px; width: 150px !important; min-height: 128px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px !important; border-radius: 18px; }
  body .calc-column-nav { display: none !important; }
  body .calc-column + .calc-column { margin-top: 14px; }
  body .calc-column-title { margin-bottom: 8px; }

  /* ---------- stories: filter chips and cards as swipeable rows ---------- */
  body .voices-trust-filters .voices-trust-filter-row { display: contents; }
  body .voices-trust-filters { gap: 8px; padding-bottom: 6px; }
  body .voices-trust-filters .voices-trust-filter { flex: 0 0 auto; width: auto !important; white-space: nowrap; }
  body .voices-trust-grid { display: flex !important; grid-template-columns: none !important; }
  body .voices-trust-grid > .voice-card { flex: 0 0 84%; width: 84% !important; max-width: 340px; grid-column: auto !important; grid-row: auto !important; min-height: 0; }

  /* ---------- calculators hub: each topic a swipeable row ---------- */
  body .ch-grid { margin-top: 16px; }
  body .ch-grid > li { flex: 0 0 78%; max-width: 300px; }
  body .ch-grid > li > * { height: 100%; }

  /* ---------- shared look: app-style cards ---------- */
  body .protection-card, body .voice-card, body .calc-card, body .cs-link-card { border-radius: 20px; }
  body .compare-heading { margin-bottom: 18px; }
}

/* Owner, 29 Oct: the home product row loops by itself on phones (app-shell.js marquee); snapping would fight the
   drift, and the edges fade like the insurance partner strip. */
@media (max-width: 767.98px) {
  body .icon-row.cy-marquee { scroll-snap-type: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
}

/* D-315 (council UX-29): the same invisible 24px tap area round the swipe-row dots */
@media (max-width: 767.98px) {
  .cy-dots button { position: relative; }
  .cy-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: 24px; transform: translate(-50%, -50%); }
}