/**
 * Mobile & tablet overrides for B.LAB site.
 *
 * Desktop (>= 861px) is defined in style.css and must not be changed here.
 * Add new mobile rules only inside @media blocks below.
 *
 * Breakpoint tokens: css/style.css :root (--bp-*)
 * JS hook: html.is-mobile / html.is-desktop (js/mobile.js)
 */

/* ── Tablet (<= 1100px) ───────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root {
    --page-x: 64px;
    --services-x: 64px;
  }

  .brand__title {
    font-size: 46px;
  }

  .service-detail__title {
    font-size: 34px;
  }
}

/* ── Mobile (<= 860px) — home, cards, topbar ──────────────────────── */

@media (max-width: 860px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 10px var(--page-x) 0;
  }

  .topbar__admin {
    position: static;
    order: 1;
    flex-shrink: 0;
  }

  .topbar__contacts {
    display: contents;
  }

  .contact-icon {
    order: 2;
    flex-shrink: 0;
  }

  .contact-icon--telegram {
    margin-left: 8px;
  }

  .contact-icon--max {
    margin-left: 6px;
  }

  .topbar__info {
    order: 10;
    flex: 1 0 100%;
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    align-items: center;
    text-align: center;
  }

  .topbar__phone,
  .topbar__address {
    text-align: center;
  }

  .brand {
    padding: 8px var(--page-x) 6px;
  }

  .page:not(.page--menu) .page-main {
    justify-content: flex-start;
    padding-top: 12px;
  }

  .services {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--card-gap);
    width: 100%;
    padding: 0 var(--page-x);
  }

  /* Start screen: image on top, caption below */
  .page:not(.page--menu) .service-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    aspect-ratio: auto;
    overflow: visible;
    container-type: normal;
    align-self: flex-start;
    background: transparent;
    border-radius: 0;
    outline-offset: 0;
  }

  .page:not(.page--menu) .service-card__bg,
  .page:not(.page--menu) .service-card__shade {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 16px;
    overflow: hidden;
  }

  .page:not(.page--menu) .service-card__shade {
    background: transparent !important;
    pointer-events: none;
  }

  .page:not(.page--menu) .service-card:hover .service-card__shade {
    background: transparent !important;
  }

  .page:not(.page--menu) .service-card__content {
    grid-row: 2;
    grid-column: 1;
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 2px 0;
    color: var(--text);
    text-align: center;
  }

  .page:not(.page--menu) .service-card__num,
  .page:not(.page--menu) .service-card__desc,
  .page:not(.page--menu) .service-card__cta {
    display: none;
  }

  .page:not(.page--menu) .service-card__title {
    margin-top: 0;
    font-size: clamp(9px, 2.8vw, 13px);
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: var(--text);
    text-wrap: balance;
  }

  .page:not(.page--menu) .page__footer {
    margin-top: 18px;
  }

  /* Menu mode: dark gray tabs in one row */
  .page--menu .services {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    padding-bottom: 16px;
  }

  .page--menu .service-card {
    display: flex;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    aspect-ratio: auto;
    min-height: 48px;
    overflow: hidden;
    border-radius: 12px;
    background: #454545;
    container-type: normal;
    outline: none;
    box-shadow: none;
    transform: none;
    opacity: 1;
    filter: none;
    align-items: stretch;
    justify-content: center;
  }

  .page--menu .service-card__bg,
  .page--menu .service-card__shade {
    display: none;
  }

  .page--menu .service-card__content {
    position: static;
    inset: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 4px;
    color: #ffffff;
    text-align: center;
  }

  .page--menu .service-card__num {
    display: none;
  }

  .page--menu .service-card__title {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-size: clamp(8px, 2.6vw, 11px);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-wrap: balance;
    color: #ffffff;
    display: block;
    align-self: center;
  }

  .page--menu .service-card:not(.service-card--active) {
    opacity: 1;
    filter: none;
    background: #454545;
  }

  .page--menu .service-card--active {
    background: #2a2a2a;
    outline: none;
    box-shadow: none;
    transform: none;
  }

  .service-detail__title {
    font-size: 28px;
  }

  .brand__title {
    font-size: 38px;
    letter-spacing: 0.3em;
    margin-right: -0.3em;
  }
}

/* ── Mobile menu cards — keep one row on all phone widths ─────────── */

/* ── Small phones (<= 480px) ────────────────────────────────────── */

@media (max-width: 480px) {
  :root {
    --page-x: 24px;
    --services-x: 24px;
    --card-gap: 10px;
  }

  .topbar {
    padding-top: 8px;
  }

  .contact-icon--telegram {
    margin-left: 6px;
  }

  .contact-icon--max {
    margin-left: 4px;
  }

  .topbar__info {
    margin-top: 8px;
  }

  .brand {
    padding-bottom: 4px;
  }

  .page:not(.page--menu) .page-main {
    padding-top: 10px;
  }

  .topbar__phone {
    font-size: 12px;
  }

  .topbar__address {
    font-size: 11px;
    max-width: 168px;
  }

  .contact-icon {
    width: 24px;
    height: 24px;
  }

  .topbar__admin {
    width: 22px;
    height: 22px;
  }

  .topbar__admin svg {
    width: 18px;
    height: 18px;
  }

  .page--menu .service-card {
    min-height: 46px;
    border-radius: 10px;
  }

  .page--menu .service-card__content {
    padding: 6px 3px;
  }

  .page--menu .service-card__title {
    font-size: clamp(7px, 2.3vw, 10px);
    line-height: 1.15;
    letter-spacing: 0.015em;
  }

  .page:not(.page--menu) .service-card__bg,
  .page:not(.page--menu) .service-card__shade {
    border-radius: 12px;
  }

  .page:not(.page--menu) .service-card__title {
    font-size: clamp(8px, 2.6vw, 11px);
    letter-spacing: 0.04em;
  }

  .brand__subtitle {
    font-size: 11px;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
  }

  .cta-pill {
    padding: 14px 63px;
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .service-detail__wrap {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .service-detail__title {
    font-size: 22px;
  }
}

/* ── Section placeholders — add mobile overrides below ──────────── */
/* modeling → css/mobile/modeling.css */
/* signage → css/mobile/signage.css */
/* modals               → css/mobile/modals.css (TBD) */
/* 3D print             → css/mobile/print.css */