/* =============================================================
   SMART MACHINERY CENTRE — RESPONSIVE.CSS
   Breakpoints: 1440 (laptop) / 1024 (tablet) / 768 (tablet portrait)
   / 425 (mobile) / 375 (mobile small)

   Approach: preserve the desktop visual hierarchy, spacing
   rhythm and type scale; collapse multi-column grids in stages
   rather than all at once, so tablet keeps a denser, premium
   feel while mobile drops to a clean single column.
============================================================= */

/* -------------------------------------------------------------
   LAPTOP — 1440px and below
   Tighten the outer container slightly; everything else uses
   fluid clamp() already so very little needs to change here.
------------------------------------------------------------- */
@media (max-width: 1440px) {
  :root {
    --container-padding: 2rem;
  }
}

@media (max-width: 1180px) {
  .navbar {
    gap: 1.4rem;
  }

  .navbar__links {
    gap: 1.35rem;
  }

  .navbar__cta {
    padding-inline: 1.35rem;
  }
}

/* -------------------------------------------------------------
   TABLET LANDSCAPE — 1024px and below
   First collapse point. Drop the desktop nav links in favour
   of the hamburger so the header doesn't crowd; move the 4-col
   grids to 2-col so cards stay large enough to read comfortably;
   keep two-column compositions (about / cta) but tighten ratios.
------------------------------------------------------------- */
@media (max-width: 1024px) {

  :root {
    --container-padding: 1.75rem;
    --section-padding-y: clamp(3.5rem, 3rem + 3vw, 6rem);
  }

  /* --- Navigation: switch to hamburger drawer --- */
  .navbar__menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 360px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: var(--color-charcoal);
    border-left: 1px solid var(--color-border);
    padding: 5.5rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 2;
    overflow-y: auto;
  }

  .navbar__menu.is-open {
    transform: translateX(0);
  }

  .navbar__close {
    display: block;
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }

  .navbar__close:hover {
    color: var(--color-warm-white);
    border-color: var(--color-gold);
  }

  .navbar__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .navbar__links li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .navbar__link {
    display: block;
    padding-block: 1.1rem;
    font-size: 1rem;
  }

  .navbar__link::after {
    display: none;
  }

  .navbar__toggle {
    display: flex;
    order: 3;
  }

  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .navbar__cta {
    display: none !important;
  }

  .navbar__menu-cta {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
  }

  /* Backdrop behind open mobile menu */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 17, 19, 0.6);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }
  .nav-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Hero --- */
  .hero {
    min-height: 92vh;
    padding-block: 6.5rem;
  }

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

  .hero__video {
    object-position: center center;
  }

  /* --- About: keep side-by-side but narrow the gap and let
     stats wrap to 2x2 if needed at smaller tablet widths --- */
  .about__grid {
    gap: 2.5rem;
  }

  /* --- Portfolio: 4 columns -> 2 columns --- */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* --- Brand partners: 4 columns -> 3 columns --- */
  .brand-grid {
    /* Preserve the 3-column breakpoint while removing the grid auto minimum. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* --- Why choose us: 3 columns -> 2 columns --- */
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .why-card {
    min-height: 150px;
  }

  /* --- Services bento: keep 2x2 logical grouping but on a
     2-column track instead of 4, so each card gets a full
     half-width row --- */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(170px, auto));
  }
  .service-card--a { grid-column: 1 / 2; grid-row: 1; }
  .service-card--b { grid-column: 2 / 3; grid-row: 1; }
  .service-card--c { grid-column: 1 / 2; grid-row: 2; }
  .service-card--d { grid-column: 2 / 3; grid-row: 2; }

  /* --- CTA: narrow the ratio between text and card --- */
  .cta__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
  }

  /* --- Footer: 3 columns -> tighten gaps --- */
  .site-footer__grid {
    gap: 2rem;
  }

   .site-footer__col ul li {
  margin-bottom: 0 !important; 
  }
}

/* -------------------------------------------------------------
   TABLET PORTRAIT — 768px and below
   Second collapse point. Stack every two-column composition
   into a single column. Cards that were 2-up start moving to
   1-up only where legibility needs it (categories stay 2-up
   for as long as comfortably possible to preserve the gallery
   feel; bento services collapses to single column stack).
------------------------------------------------------------- */
@media (max-width: 768px) {

  :root {
    --container-padding: 1.5rem;
    --section-padding-y: clamp(3rem, 2.5rem + 3vw, 5rem);
  }

  .navbar__menu {
    width: 82vw;
  }

  /* --- Hero --- */
  .hero {
    min-height: 88vh;
    padding-block: 7rem 4.5rem;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__video {
    object-position: 58% center;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }

  .hero__footnote {
    margin-top: 2.5rem;
  }

  /* --- About: stack image under text, full width stats --- */
  .about__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about__media {
    order: -1;
  }

  .about__paragraph {
    max-width: 100%;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Portfolio: keep 2-up grid, reduce gap --- */
  .card-grid {
    gap: 1.1rem;
  }

  /* --- Partners: 3 columns -> 2 columns --- */
  .brand-grid {
    /* Preserve the 2-column breakpoint while keeping card widths fluid. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  /* --- Why choose us: single readable column --- */
  .why__intro,
  .why .section-subtitle {
    max-width: 100%;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 3rem;
  }

  .why-card {
    min-height: 0;
  }

  /* --- Services bento: collapse to a single readable column,
     order preserved exactly as the desktop reading order --- */
  .services-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .service-card--a,
  .service-card--b,
  .service-card--c,
  .service-card--d {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .service-card {
    min-height: 0;
    padding: 1.6rem;
  }

  /* --- CTA: stack text above contact card --- */
  .cta__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cta__title,
  .cta__body {
    max-width: 100%;
  }

  /* --- Footer: 3 columns -> 2 columns, brand spans full width --- */
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__col ul li {
  margin-bottom: 0 !important; 
  }

  .site-footer__desc {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------
   MOBILE — 425px and below
   Full single-column layout. Comfortable touch targets (min
   44px), no horizontal scroll, generous line-length control.
------------------------------------------------------------- */
@media (max-width: 425px) {

  :root {
    --container-padding: 1.25rem;
    --section-padding-y: clamp(2.75rem, 2.25rem + 3vw, 4rem);
  }

  /* --- Navigation --- */
  .navbar {
    padding-block: 0.9rem;
  }

  .navbar__logo img {
    width: 96px;
  }

  .navbar__menu {
    width: min(86vw, 320px);
    padding: 5.5rem 1.5rem 2rem;
  }

  /* --- Hero --- */
  .hero {
    min-height: 86vh;
    padding-block: 6.75rem 3.5rem;
  }

  /* .hero__content {
  margin-top: none;
  } */

  .hero__video {
    object-position: 62% center;
  }

  .hero__title {
    margin-bottom: 1.2rem;
  }

  .hero__body {
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .hero__actions {
    flex-direction: column;
    gap: 0.85rem;
  }

  .hero__actions .btn {
    width: 100%;
    padding-block: 1.1rem;
  }

  .hero__footnote {
    font-size: 0.75rem;
    margin-top: 2rem;
    line-height: 1.5;
  }

  /* --- About --- */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
  }

  .stat-grid__item {
    padding: 1.3rem 0.6rem;
  }

  .about__media img {
    aspect-ratio: 4 / 3.4;
  }

  /* --- Portfolio: single column for full readability of
     each part name + description on the smallest screens --- */
  .card-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .product-card__media {
    aspect-ratio: 16 / 10;
  }

  /* --- Partners --- */
  .brand-grid {
    /* Mobile stays 2-up; tracks can still shrink with the container. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .brand-grid__item {
    aspect-ratio: 16 / 10;
    padding: 1.1rem;
  }

  .brand-grid__item img {
    max-height: 60px;
  }

  /* --- Why choose us --- */
  .why-grid {
    gap: 1rem;
    margin-top: 2.5rem;
  }

  .why-card {
    padding: 1.5rem;
  }

  /* --- Services --- */
  .services__title br {
    display: inline;
  }

  .service-card {
    padding: 1.5rem;
  }

  /* --- CTA --- */
  .cta__actions {
    flex-direction: column;
  }

  .cta__actions .btn {
    width: 100%;
  }

  .cta__card {
    padding: 1.6rem;
  }

  /* --- Footer: single column, fully stacked --- */
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .site-footer__brand {
    grid-column: auto;
  }

   .site-footer__col ul li {
  margin-bottom: 0 !important; 
  }

  .site-footer__bottom {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}

/* -------------------------------------------------------------
   MOBILE SMALL — 375px and below
   Final refinement pass for the smallest common viewport.
   Mostly typography/spacing nudges; layout shape is unchanged
   from the 425px breakpoint.
------------------------------------------------------------- */
@media (max-width: 375px) {

  :root {
    --container-padding: 1rem;
  }

  .hero__title {
    letter-spacing: -0.01em;
  }

  .btn {
    font-size: 0.8125rem;
    padding: 1rem 1.4rem;
  }

  .stat-grid__value {
    font-size: 1.4rem;
  }

  .stat-grid__label {
    font-size: 0.625rem;
  }

  .product-card__title {
    font-size: 0.95rem;
  }

  .why-card {
    padding: 1.4rem;
  }

  .why-card__title {
    font-size: 1rem;
  }

  .cta__card {
    padding: 1.4rem;
  }

   .site-footer__col ul li {
  margin-bottom: 0 !important; 
  }

  .site-footer__bottom {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}

/* -------------------------------------------------------------
   TOUCH TARGET SAFETY NET
   Applies below the point where the desktop hover-driven nav
   becomes a touch interface, ensuring every interactive element
   keeps a minimum comfortable hit area regardless of breakpoint.
------------------------------------------------------------- */
@media (max-width: 1024px) {
  .navbar__link,
  .btn,
  .site-footer__col ul li a,
  .navbar__toggle {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .navbar__link {
    display: flex;
  }

  .btn {
    min-height: 48px;
  }
}

/* -------------------------------------------------------------
   LANDSCAPE PHONE SAFETY
   Prevents the full-height hero from forcing scroll-jank on
   short landscape viewports (common on phones rotated sideways).
------------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 120vh;
    padding-block: 5.5rem 3rem;
  }
}