/* ==========================================================================
   05 IT Solutions — Responsive Adjustments
   Breakpoints (Bootstrap 5 defaults):
   - xs   < 576px   (small mobile)
   - sm   ≥ 576px
   - md   ≥ 768px   (tablet)
   - lg   ≥ 992px
   - xl   ≥ 1200px  (desktop: utility bar + mega menus)
   - xxl  ≥ 1400px

   The header switches to the right-side drawer below 1200px because the
   six spacious primary items + mega menus cannot fit at lg widths without
   becoming cramped. Drawer, overlay and accordion styling live in
   style.css §14; this file holds only breakpoint-specific refinements.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Collapsed navigation (< 1200px) — drawer mode
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .site-navbar .container {
    flex-wrap: nowrap;
  }

  /* Very narrow viewports: keep the drawer inside the screen */
  .site-nav-collapse {
    width: min(var(--drawer-width), 85vw);
  }
}

/* --------------------------------------------------------------------------
   Desktop (≥ 1200px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .site-navbar .container {
    flex-wrap: nowrap;
  }

  /* Safety: never let a stray mobile state leak into desktop layout */
  html.nav-drawer-open,
  body.nav-drawer-open {
    overflow: auto;
  }
}

/* --------------------------------------------------------------------------
   Large desktop (≥ 1400px) — extra breathing room
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .site-nav {
    column-gap: var(--space-4);
  }

  .mega-menu__columns {
    column-gap: var(--space-9);
  }
}

/* --------------------------------------------------------------------------
   Guard against horizontal overflow at every breakpoint
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Products catalogue (products.html)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .products-catalogue {
    padding-block-end: calc(var(--space-8) + var(--space-4));
  }
}

@media (max-width: 767.98px) {
  .products-hero {
    padding-block: clamp(var(--space-6), 10vw, var(--space-7)) clamp(var(--space-6), 8vw, var(--space-7));
  }

  .product-card__media {
    min-height: 128px;
  }

  .products-catalogue {
    padding-block-end: calc(var(--space-7) + var(--space-4));
  }
}

/* Narrow phones (< 576px): the catalogue is single-column, so the row
   gutters drive the page edges and the vertical rhythm between cards.
   --bs-gutter-x = 2.5rem gives a 1.25rem (~20px) inset on each side so
   cards never touch the viewport; --bs-gutter-y = 1rem gives a tidy 16px
   gap between stacked cards. Both cascade into the .container / .row and
   override the gx-4/gy-4 utilities, leaving tablet/desktop untouched. */
@media (max-width: 575.98px) {
  .products-catalogue {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 1rem;
  }

  .products-catalogue .product-grid {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Solutions catalogue (solutions.html)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .solutions-catalogue {
    padding-block-end: calc(var(--space-8) + var(--space-4));
  }
}

@media (max-width: 767.98px) {
  .solutions-hero {
    padding-block: clamp(var(--space-6), 10vw, var(--space-7)) clamp(var(--space-6), 8vw, var(--space-7));
  }

  .solution-card__icon {
    min-height: 128px;
  }

  .solutions-catalogue {
    padding-block-end: calc(var(--space-7) + var(--space-4));
  }
}

/* Narrow phones (< 576px): the catalogue is single-column, so the row
   gutters drive the page edges and the vertical rhythm between cards. */
@media (max-width: 575.98px) {
  .solutions-catalogue {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 1rem;
  }

  .solutions-catalogue .solution-grid {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Research & Innovation Lab (research.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .research-hero {
    padding-block: clamp(var(--space-6), 10vw, var(--space-7)) clamp(var(--space-6), 8vw, var(--space-7));
  }

  /* The lifecycle wraps and stacks in DOM order; connectors are hidden. */
  .research-lifecycle__list {
    gap: var(--space-6) var(--space-5);
  }
}

/* Narrow phones (< 576px): single-column lifecycle with a little more air
   between stages. */
@media (max-width: 575.98px) {
  .research-lifecycle__stage {
    flex-basis: 100%;
  }

  .research-team__blurb {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Research Team (research-team.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .rt-hero {
    padding-block: clamp(var(--space-6), 10vw, var(--space-7)) clamp(var(--space-6), 8vw, var(--space-7));
  }

  /* Cards are already stacked (portrait above content). On mobile the portrait
     keeps its 4:5 frame but is capped so it stays large without dominating the
     viewport; every researcher shares the same frame. */
  .rt-profile__photo,
  .rt-profile__media {
    max-width: 320px;
  }
}

/* --------------------------------------------------------------------------
   Research Areas (research-areas.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ra-area__main,
  .ra-area__apps {
    padding-inline: var(--space-5);
  }
}

/* Narrow phones (< 576px): the catalogue is single-column, so the card padding
   is pinned to one step and never grows with the viewport. */
@media (max-width: 575.98px) {
  .ra-area__main {
    padding: var(--space-5);
  }

  .ra-area__apps {
    padding-inline: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Research Methodology (research-methodology.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* The hero already inherits the shared .research-hero padding. The stage
     cards and the restrained integrity list keep their rhythm; only the
     integrity icon is scaled down a step on small screens. */
  .rm-integrity__icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
}

/* Narrow phones (< 576px): the lifecycle, method and loop grids are already
   single-column, so the stage padding is pinned to one step. */
@media (max-width: 575.98px) {
  .rm-stage {
    padding: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Research Projects (research-projects.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* The hero already inherits the shared .research-hero padding, and the
     four-stage sequence is already single-column. Only the editorial status
     mark is scaled down a step on small screens. */
  .rp-status__mark {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Academic & Industry Collaboration (research-collaboration.html)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* The three-step sequence and the two-card grids are already single-column.
     Only the principle icon on the dark band is scaled down a step. */
  .rc-principle__icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
}

/* Narrow phones (< 576px): the peer cards and model cards are single-column,
   so the card padding is pinned to one step and never grows with the
   viewport. */
@media (max-width: 575.98px) {
  .rc-peer,
  .rc-model {
    padding: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Blog & Insights (blog.html)
   The grid columns themselves live in style.css §52 (1 → 2 → 3 across the
   breakpoints, matching the other catalogue pages). Only small-screen
   refinements belong here.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .blog-intro {
    padding-block: clamp(var(--space-6), 8vw, var(--space-7)) var(--space-5);
  }

  .blog-featured__body {
    padding: var(--space-5);
  }
}

/* Narrow phones (< 576px): the listing is single-column, so pin the card
   padding to one step and let the pagination controls wrap to a second row
   without crowding the viewport edges. */
@media (max-width: 575.98px) {
  .blog-card__body {
    padding: var(--space-4);
  }

  .blog-pagination__link--prev,
  .blog-pagination__link--next {
    padding: 0 var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   FAQ (faq.html)
   The question list is a single column at every breakpoint (shared .faq-item
   component); only the intro, search field and filter bar need small-screen
   refinements. Section rhythm lives in style.css §54.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .faq-intro {
    padding-block: clamp(var(--space-6), 8vw, var(--space-7)) var(--space-5);
  }
}

/* Narrow phones (< 576px): let the search field fill the width and tighten the
   answer/related padding so long text and link rows breathe against the edge. */
@media (max-width: 575.98px) {
  .faq-search {
    max-width: 100%;
  }

  .faq-page .faq-item__answer-inner p,
  .faq-page .faq-item__related {
    padding-right: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   About (about.html)
   The hero collapses to a single column and the editorial sections stack; only
   small-screen spacing refinements belong here. The layout grids live in
   style.css §55.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ab-hero__logo {
    max-width: 360px;
    margin-inline: auto;
  }
}

@media (max-width: 767.98px) {
  .ab-hero {
    padding-block: clamp(var(--space-6), 8vw, var(--space-7)) var(--space-6);
  }

  .ab-split__aside {
    max-width: none;
  }

  /* Timeline: single-column with the rail in the left padding. */
  .ab-timeline {
    --tl-rail-x: 0.6rem;
    --tl-row-gap: var(--space-5);
  }

  .ab-timeline__item {
    padding-left: 1.75rem;
  }

  .ab-timeline__thumb {
    width: 72px;
    height: 48px;
  }

  .ab-timeline__thumb:hover .ab-timeline__thumb-img,
  .ab-timeline__thumb:focus-visible .ab-timeline__thumb-img,
  .ab-timeline__thumb.is-zoomed .ab-timeline__thumb-img {
    transform: scale(2.4);
  }

  .ab-timeline__stat {
    align-items: flex-start;
  }

  .ab-evolution__stages {
    gap: var(--space-2) var(--space-3);
  }
}

@media (max-width: 575.98px) {
  .ab-hero__logo {
    padding: var(--space-5);
  }

  .ab-area {
    padding: var(--space-4) 0;
  }

  .ab-timeline__thumb {
    width: 64px;
    height: 44px;
  }

  .ab-timeline__thumb:hover .ab-timeline__thumb-img,
  .ab-timeline__thumb:focus-visible .ab-timeline__thumb-img,
  .ab-timeline__thumb.is-zoomed .ab-timeline__thumb-img {
    transform: scale(2.2);
  }

  /* Stack the evolution stages vertically with a down arrow. */
  .ab-evolution__stages {
    flex-direction: column;
    align-items: flex-start;
  }

  .ab-evolution__arrow {
    transform: rotate(90deg);
  }
}

/* --------------------------------------------------------------------------
   Leadership (leadership.html)
   The profile grid and the responsibility strip are already single-column on
   small screens (base styles in style.css §57). Only small-screen spacing
   refinements belong here.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .ld-hero {
    padding-block: clamp(var(--space-5), 7vw, var(--space-6)) var(--space-6);
  }

  .ld-profile__photo {
    max-width: 200px;
  }
}

/* --------------------------------------------------------------------------
   Individual leadership profile (ananda-siddhan.html)
   The section grids are already single-column on small screens (base styles
   in style.css). Only small-screen spacing and action refinements live here.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .as-hero {
    padding-block: clamp(var(--space-5), 7vw, var(--space-6)) var(--space-6);
  }

  .as-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .as-hero__actions .site-btn {
    width: 100%;
  }

  .as-hero__media {
    max-width: min(60%, 240px);
  }

  .as-focus__item {
    gap: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   Capabilities (capabilities.html)
   The grids are already single-column on small screens (base styles in
   style.css §58). Only small-screen spacing and technology-tile refinements
   belong here.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .cap-hero {
    padding-block: clamp(var(--space-5), 7vw, var(--space-6)) var(--space-6);
  }

  .cap-tech-section {
    padding-block: var(--space-7);
  }

  /* Smaller tiles keep more of the stack readable on a phone, and the
     shorter period keeps the same perceived speed. */
  .cap-marquee {
    --cap-tech-gap: 0.5rem;
    --cap-group-gap: 0.625rem;
    --cap-marquee-gap: 1.5rem;
  }

  .cap-tech {
    padding: 0.375rem 0.625rem;
  }

  .cap-tech__logo,
  .cap-tech__icon,
  .cap-tech__mono {
    width: 1.125rem;
    height: 1.125rem;
  }

  .cap-tech__mono {
    font-size: 0.5625rem;
  }

  .cap-tech__name {
    font-size: 0.75rem;
  }

  .cap-marquee__group-label {
    font-size: 0.625rem;
  }
}