/* Claims Saathi — Responsive
   Mobile-first overrides. Loaded after layout.css / components.css / pages.css.
   Breakpoints: 320 · 360 · 390 · 430 · 768 · 1024 · 1280 · 1440 · 1920
*/

/* --------------------------------------------------------------------------
   Global safety
   -------------------------------------------------------------------------- */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Keep overflow clipping off .site-header — overflow-x: clip forces
   overflow-y to compute to auto, which chops the Services mega menu. */
.home-hero,
.hero-visual,
.section--curve,
.main-content,
.site-footer {
  overflow-x: clip;
  max-width: 100%;
}

.site-header {
  max-width: 100%;
  overflow: visible;
}

img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

.container,
.container--wide,
.container--narrow {
  width: 100%;
  max-width: 100%;
  padding-inline: var(--space-4);
  box-sizing: border-box;
}

/* Touch targets ≥ 44px; primary CTAs ≥ 48px */
.btn,
.header-toggle,
.mobile-nav__close,
.mobile-nav__list a,
.mobile-nav__list button,
.mobile-action-bar a,
.mobile-action-bar button,
.toc-mobile summary,
.form-input,
.form-select,
.accordion__trigger,
.faq__trigger,
.filter-tab,
.tabs__btn {
  min-height: 44px;
}

.btn--primary,
.btn:not(.btn--sm):not(.btn--icon) {
  min-height: 48px;
}

.btn--sm {
  min-height: 44px;
}

.btn,
.header-toggle,
.mobile-nav__close,
.btn--icon {
  min-width: 44px;
}

.toc__list a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Header / nav / action-bar responsive behaviour — now owned by assets/css/header.css
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   TOC — mobile section menu; sticky only on desktop
   -------------------------------------------------------------------------- */

.page-with-toc {
  grid-template-columns: 1fr !important;
}

.page-with-toc > .toc {
  display: none !important;
  position: static;
  top: auto;
  max-height: none;
}

.toc-mobile {
  display: block !important;
}

.toc-mobile summary {
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Hero visual — simplify small screens
   -------------------------------------------------------------------------- */

.hero-visual {
  max-width: 18rem;
  aspect-ratio: 1 / 0.92;
  margin-inline: auto;
}

.hero-visual__deco,
.hero-visual__layer--float {
  display: none !important;
}

.hero-visual__glow {
  opacity: 0.45;
  filter: blur(6px);
}

.hero-visual__canvas {
  display: none !important;
}

.hero-visual__layer--mid {
  width: 48%;
  top: 18%;
  right: 6%;
  transform: translateZ(12px) rotateY(6deg);
}

.hero-visual__layer--front {
  width: 46%;
  left: 8%;
  bottom: 12%;
  transform: translateZ(28px) rotateY(-4deg);
}

.hero-visual__layer--back {
  transform: translateZ(-20px) rotateY(-4deg) rotateX(2deg);
}

.home-hero .split {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.home-hero h1 {
  font-size: clamp(1.7rem, 1.25rem + 3.2vw, 2.25rem);
}

.home-hero .section__actions,
.home-hero__actions,
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.home-hero .section__actions .btn,
.home-hero__actions .btn,
.hero-actions .btn {
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Timelines — vertical under 1024
   -------------------------------------------------------------------------- */

.timeline--horizontal {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  grid-template-columns: none;
}

.timeline--horizontal::before {
  display: none !important;
}

.timeline--horizontal .timeline__item {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-4);
  align-items: start;
  text-align: left;
  padding-bottom: var(--space-6);
}

.timeline--horizontal .timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 2.75rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-500), rgba(8, 123, 211, 0.1));
}

.timeline--horizontal .timeline__marker {
  grid-row: 1 / span 2;
}

.timeline--horizontal .timeline__text {
  max-width: none;
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Ecosystem — vertical / mobile under 768
   -------------------------------------------------------------------------- */

.ecosystem-visual--desktop,
.ecosystem-visual:not(.ecosystem-visual--mobile) {
  display: none;
}

.ecosystem-visual--mobile {
  display: block !important;
  aspect-ratio: auto;
  max-width: none;
}

.ecosystem-visual--mobile .ecosystem-stack,
.ecosystem-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ecosystem-visual--mobile .ecosystem-stack__item,
.ecosystem-stack__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  min-height: 44px;
}

.ecosystem-visual--mobile .ecosystem-stack__item--center,
.ecosystem-stack__item--center {
  justify-content: center;
  text-align: center;
  background: var(--gradient-primary);
  color: var(--white);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Footer — 1 column on small phones
   -------------------------------------------------------------------------- */

.footer-grid {
  grid-template-columns: 1fr !important;
  gap: var(--space-8);
}

.footer-brand {
  grid-column: auto;
  max-width: none;
}

.footer-bottom {
  flex-direction: column;
  align-items: flex-start;
}

.footer-actions {
  width: 100%;
}

.footer-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Forms — full width
   -------------------------------------------------------------------------- */

.form,
.form-row,
.form-field {
  width: 100%;
}

.form-row {
  grid-template-columns: 1fr !important;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  max-width: 100%;
}

.form-actions {
  flex-direction: column;
  align-items: stretch;
}

.form-actions .btn {
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Grids / splits — stack
   -------------------------------------------------------------------------- */

.split {
  grid-template-columns: 1fr !important;
}

.split--reverse .split__media {
  order: 0;
}

.grid--2,
.grid--3,
.grid--4,
.resource-grid {
  grid-template-columns: 1fr !important;
}

.trust-strip {
  grid-template-columns: 1fr;
}

.section {
  padding-block: clamp(2.75rem, 8vw, 3.5rem);
}

.table-wrap,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   360px+
   -------------------------------------------------------------------------- */

@media (min-width: 360px) {
  .container,
  .container--wide,
  .container--narrow {
    padding-inline: var(--space-5);
  }

  .hero-visual {
    max-width: 20rem;
  }

  .home-hero h1 {
    font-size: clamp(1.8rem, 1.35rem + 2.8vw, 2.4rem);
  }
}

/* --------------------------------------------------------------------------
   390px+
   -------------------------------------------------------------------------- */

@media (min-width: 390px) {
  .container,
  .container--wide,
  .container--narrow {
    padding-inline: 1.35rem;
  }

  .home-hero .section__actions,
  .home-hero__actions,
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .home-hero .section__actions .btn,
  .home-hero__actions .btn,
  .hero-actions .btn {
    width: auto;
    flex: 1 1 auto;
    min-width: min(100%, 10.5rem);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .form-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .form-actions .btn {
    width: auto;
    flex: 0 1 auto;
  }

  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-visual {
    max-width: 21.5rem;
  }
}

/* --------------------------------------------------------------------------
   430px+
   -------------------------------------------------------------------------- */

@media (min-width: 430px) {
  .container,
  .container--wide,
  .container--narrow {
    padding-inline: var(--space-6);
  }

  .hero-visual {
    max-width: 22rem;
    aspect-ratio: 1 / 0.95;
  }

  .section {
    padding-block: clamp(3rem, 7vw, 4.25rem);
  }

  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   768px+ — tablet
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .container,
  .container--wide,
  .container--narrow {
    padding-inline: var(--space-8);
  }

  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    gap: var(--space-10);
    align-items: center;
  }

  .split--reverse {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  }

  .split--reverse .split__media {
    order: -1;
  }

  .home-hero .split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-10);
    align-items: center;
  }

  .home-hero h1 {
    font-size: clamp(2.1rem, 1.55rem + 1.8vw, 2.85rem);
  }

  .home-hero .section__actions .btn,
  .hero-actions .btn {
    flex: 0 1 auto;
    width: auto;
  }

  /* Hero: restore limited deco; keep canvas off until desktop */
  .hero-visual {
    max-width: 26rem;
    aspect-ratio: 1 / 1;
  }

  .hero-visual__deco {
    display: block !important;
    opacity: 0.55;
  }

  .hero-visual__layer--float {
    display: none !important;
  }

  .hero-visual__canvas {
    display: none !important;
  }

  .hero-visual__glow {
    opacity: 0.75;
  }

  .hero-visual__layer--mid {
    width: 54%;
  }

  .hero-visual__layer--front {
    width: 50%;
  }

  /* Ecosystem circular returns */
  .ecosystem-visual--desktop,
  .ecosystem-visual:not(.ecosystem-visual--mobile) {
    display: block;
  }

  .ecosystem-visual--mobile {
    display: none !important;
  }

  .grid--2,
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-grid {
    grid-template-columns: 1.35fr repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-8) var(--space-6);
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .section {
    padding-block: clamp(3rem, 5.5vw, 5.5rem);
  }
}

/* --------------------------------------------------------------------------
   1024px+ — desktop chrome & layouts
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* Hero full treatment */
  .hero-visual {
    max-width: 32rem;
    aspect-ratio: 1 / 1.05;
  }

  .hero-visual__deco,
  .hero-visual__layer--float,
  .hero-visual__glow,
  .hero-visual__canvas {
    display: block !important;
    opacity: 1;
  }

  .hero-visual__layer--mid {
    width: 58%;
    transform: translateZ(20px) rotateY(10deg);
  }

  .hero-visual__layer--front {
    width: 52%;
    transform: translateZ(55px) rotateY(-6deg) rotateX(2deg);
  }

  .hero-visual__layer--back {
    transform: translateZ(-40px) rotateY(-8deg) rotateX(4deg);
  }

  .home-hero h1 {
    font-size: var(--fs-5xl);
  }

  /* Timelines restore horizontal */
  .timeline--horizontal {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    flex-direction: unset;
  }

  .timeline--horizontal::before {
    display: block !important;
  }

  .timeline--horizontal .timeline__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding-bottom: 0;
    grid-template-columns: none;
  }

  .timeline--horizontal .timeline__item:not(:last-child)::before {
    content: none;
    display: none;
  }

  .timeline--horizontal .timeline__marker {
    grid-row: auto;
  }

  .timeline--horizontal .timeline__text {
    max-width: 12rem;
    margin-inline: auto;
  }

  /* TOC sticky desktop; hide mobile section menu */
  .toc-mobile {
    display: none !important;
  }

  .page-with-toc {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 16.5rem) !important;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }

  .page-with-toc > .toc {
    display: block !important;
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--utility-h) + var(--space-4));
    max-height: calc(100vh - var(--header-h-scrolled) - var(--utility-h) - var(--space-8));
    overflow-y: auto;
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) !important;
  }

  .container {
    max-width: var(--container);
  }

  .container--wide {
    max-width: var(--container-wide);
  }

  .container--narrow {
    max-width: var(--container-narrow);
  }
}

/* --------------------------------------------------------------------------
   1280px+
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .container,
  .container--wide,
  .container--narrow {
    padding-inline: var(--space-10);
  }

  .hero-visual {
    max-width: 34rem;
  }

  .page-with-toc {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 17rem) !important;
    gap: var(--space-12);
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .trust-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)) !important;
    gap: var(--space-10);
  }

  .ecosystem-visual,
  .ecosystem-visual--desktop {
    max-width: 44rem;
  }

  .home-hero h1 {
    font-size: clamp(2.6rem, 1.8rem + 1.4vw, 3.5rem);
  }
}

/* --------------------------------------------------------------------------
   1440px+
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
  .home-hero,
  .page-hero {
    padding-block: clamp(4rem, 6.5vw, 6rem);
  }

  .hero-visual {
    max-width: 36rem;
  }

  .page-with-toc {
    grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 18rem) !important;
  }

  .container--wide {
    max-width: min(var(--container-wide), 90rem);
  }
}

/* --------------------------------------------------------------------------
   1920px+
   -------------------------------------------------------------------------- */

@media (min-width: 1920px) {
  .container,
  .container--wide {
    padding-inline: var(--space-12);
  }

  .home-hero h1 {
    font-size: var(--fs-6xl);
  }

  .hero-visual {
    max-width: 38rem;
  }

  .ecosystem-visual,
  .ecosystem-visual--desktop {
    max-width: 48rem;
  }
}

/* --------------------------------------------------------------------------
   Landscape phones / short viewports
   -------------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
  .home-hero,
  .page-hero {
    padding-block: var(--space-6);
  }

  .hero-visual {
    max-width: 16rem;
    aspect-ratio: 1 / 0.85;
  }
}

/* --------------------------------------------------------------------------
   Coarse pointers
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .nav-link,
  .mega-menu__list a,
  .mobile-nav__list a,
  .mobile-nav__list button,
  .toc__list a,
  .footer-col__list a {
    min-height: 44px;
  }

  .btn--sm {
    min-height: 44px;
    padding-inline: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Print handoff (print.css owns the rest)
   -------------------------------------------------------------------------- */

@media print {
  .mobile-action-bar,
  .header-toggle,
  .toc-mobile,
  .nav-overlay,
  .mobile-nav {
    display: none !important;
  }

  body.has-mobile-bar {
    padding-bottom: 0 !important;
  }

  html,
  body {
    overflow: visible !important;
  }
}