/*
 * responsive.css
 * Responsive Breakpoint Overrides — Bnood Industrial V1
 *
 * Source of truth: docs/02_UX_UI/UI_TOKENS.md, docs/02_UX_UI/DESIGN_SYSTEM.md
 * Task: B02-T03 — Create Shared Components CSS
 * Batch: B02 — UI Foundation & Shared Layouts
 *
 * Approved breakpoints:
 *   Small mobile : max-width: 479px
 *   Mobile       : max-width: 767px
 *   Tablet       : max-width: 1023px
 *   Desktop      : min-width: 1024px
 *   Wide         : min-width: 1280px
 *
 * Rules:
 * - Use only approved breakpoints.
 * - All values must reference tokens from tokens.css.
 * - No Tailwind, Bootstrap, Sass, or CSS framework.
 * - No fake content.
 * - Page-specific responsive styles live in public.css or admin.css.
 */

/* =========================
   Product Grid — responsive
========================= */

@media (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-20);
  }
}

@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}

/* =========================
   Category Grid — responsive
========================= */

@media (max-width: 767px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
  }
}

/* =========================
   Typography — responsive
========================= */

@media (max-width: 767px) {
  .text-hero {
    font-size: var(--font-hero-mobile);
    line-height: 1.16;
    letter-spacing: -0.3px;
  }

  .text-page-title {
    font-size: var(--font-page-title-mobile);
    line-height: 1.18;
  }

  .text-section-title {
    font-size: var(--font-section-title-mobile);
    line-height: 1.25;
  }

  .text-card-title {
    font-size: var(--font-card-title-mobile);
  }

  .text-body-lg,
  .text-body {
    font-size: var(--font-body-mobile);
  }

  .text-body-sm {
    font-size: var(--font-body-sm-mobile);
  }
}

/* =========================
   Admin Overview Grid — responsive
========================= */

@media (max-width: 1023px) {
  .admin-overview-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .admin-kpi-card {
    grid-column: span 4;
  }

  .admin-funnel-card,
  .admin-side-card,
  .admin-half-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .admin-overview-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .admin-kpi-card,
  .admin-funnel-card,
  .admin-side-card,
  .admin-half-card {
    grid-column: auto;
  }
}

/* =========================
   Funnel — mobile
========================= */

@media (max-width: 767px) {
  .funnel-steps {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Header / Footer — mobile
========================= */

@media (max-width: 767px) {
  .site-header {
    height: var(--header-height-mobile);
  }

  .site-header__inner {
    width: min(100% - 32px, var(--container-default));
  }

  .site-footer {
    padding-block: 48px 24px;
  }

  .site-footer__grid {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr;
    gap: var(--space-28);
  }
}

/* =========================
   Admin Shell — mobile
========================= */

@media (max-width: 767px) {
  .admin-shell {
    display: block;
  }

  .admin-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 88vw);
    height: 100vh;
    transform: translateX(100%);
    box-shadow: var(--shadow-admin-drawer);
    z-index: var(--z-admin-drawer);
    transition: transform var(--duration-slow) var(--ease-out);
  }

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

  .admin-main {
    padding: var(--space-16);
  }
}

/* =========================
   Small mobile overrides
========================= */

@media (max-width: 479px) {
  .btn-lg {
    height: 46px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .empty-state {
    padding: var(--space-32) var(--space-16);
  }

  .admin-card {
    padding: var(--space-16);
  }
}

/* =========================
   Home Page — responsive
========================= */

@media (max-width: 767px) {
  .home-hero {
    padding-block: 56px 40px;
  }

  .home-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-hero__title {
    font-size: 34px;
    line-height: 1.16;
    letter-spacing: -0.3px;
  }

  .home-hero__subtitle {
    font-size: 15px;
    line-height: 1.75;
    margin-top: 14px;
  }

  .home-hero__actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }

  .home-hero__actions .btn {
    width: 100%;
    height: 48px;
  }

  .home-hero__support {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    line-height: 1.6;
  }

  .home-hero__visual {
    min-height: 260px;
    border-radius: 18px;
    padding: 18px;
  }

  .home-hero__image {
    max-height: 220px;
  }

  .home-hero__floating-card {
    display: none;
  }

  .home-trust-line__card {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .home-trust-line__item {
    font-size: 13px;
    line-height: 1.6;
  }

  .home-categories__row {
    flex-wrap: nowrap;
    min-width: max-content;
  }

  .home-category-tab {
    height: 40px;
    padding-inline: 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  .home-section {
    padding-block: 48px;
  }

  .home-section-heading {
    margin-bottom: 24px;
  }

  .products-quote-cta__panel {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    text-align: center;
  }

  .products-quote-cta__content p {
    margin-inline: auto;
  }

  .products-quote-cta__actions {
    flex-direction: column;
  }

  .products-quote-cta__actions .btn {
    width: 100%;
  }

  .product-card {
    min-height: auto;
    border-radius: 16px;
  }

  .product-card__media {
    height: 180px;
    width: 100%;
    padding: 16px;
  }

  .product-card__image {
    max-height: 145px;
  }

  .product-card__content {
    padding: 16px;
    gap: 8px;
  }

  .product-card__meta {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .product-card__title {
    font-size: 18px;
    line-height: 1.35;
  }

  .product-card__description {
    font-size: 13px;
    line-height: 1.6;
  }

  .product-card__actions {
    flex-direction: column;
    gap: 10px;
  }

  .product-card__actions .btn {
    width: 100%;
    height: 44px;
  }

  .products-hero {
    padding-block: 48px 36px;
  }

  .products-hero__container {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .products-hero__title {
    font-size: 32px;
    line-height: 1.18;
    letter-spacing: -0.3px;
  }

  .products-hero__subtitle {
    font-size: 15px;
    line-height: 1.75;
    margin-top: 12px;
  }

  .products-hero__summary {
    padding: 18px;
    border-radius: 16px;
  }

  .products-hero::before {
    opacity: 0.035;
  }
}

/* =========================
   Product Detail Page — responsive
========================= */

@media (max-width: 767px) {
  .product-breadcrumbs { padding-block: 16px 0; }
  .product-breadcrumbs__list {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: none;
    font-size: 12px;
  }

  .product-hero { padding-block: 28px 44px; }
  .product-hero__container {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr !important;
    grid-template-areas: "media" "summary" !important;
    gap: 28px;
  }
  .product-hero__title {
    font-size: 32px;
    line-height: 1.18;
    letter-spacing: -0.3px;
  }
  .product-hero__description {
    font-size: 15px;
    line-height: 1.75;
    margin-top: 14px;
  }
  .product-hero__actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }
  .product-hero__actions .btn {
    width: 100%;
    height: 48px;
  }

  .product-gallery {
    padding: 16px;
    border-radius: 18px;
  }
  .product-gallery__main {
    min-height: 260px;
    padding: 18px;
    border-radius: 14px;
  }
  .product-gallery__image { max-height: 220px; }
  .product-gallery__thumb {
    width: 66px;
    height: 58px;
  }

  .product-quick-specs { padding-block: 0 40px; }
  .product-quick-specs__grid {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .quick-spec-card {
    padding: 12px;
    border-radius: 14px;
    min-height: 100px;
    gap: 6px;
  }
  .quick-spec-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .quick-spec-icon svg {
    width: 15px;
    height: 15px;
  }
  .quick-spec-label {
    font-size: 11px;
  }
  .quick-spec-value {
    font-size: 15px;
  }

  .product-content { padding-block: 16px 48px; }
  .product-content__layout {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "sidebar" !important;
    gap: 24px;
  }
  .product-content__sidebar { position: static; }

  .product-quote-card {
    padding: 18px;
    border-radius: 16px;
  }
  .product-quote-card__actions .btn { height: 48px; }

  .product-section-card {
    padding: 18px;
    border-radius: 16px;
  }
  .product-section-title { font-size: 20px; }

  .product-specs { padding: 18px; border-radius: 16px; }
  .product-specs__row {
    display: grid;
    gap: 4px;
    padding-block: 12px;
  }
  .product-specs__label, .product-specs__value {
    width: auto;
    padding: 0;
  }
  .product-specs__label { font-size: 13px; }
  .product-specs__value { font-size: 14px; }

  .product-applications__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .application-item { padding: 12px; }

  .product-features__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-downloads { padding: 18px; border-radius: 16px; }
  .download-file {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }
  .download-file__action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .product-faq { padding: 18px; border-radius: 16px; }
  .product-faq__item { padding: 16px; }
  .product-faq__question { font-size: 15px; line-height: 1.5; }
  .product-faq__answer { font-size: 14px; line-height: 1.7; }

  .product-final-cta { padding-block: 0 48px; }
  .product-final-cta__panel {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 18px;
    gap: 20px;
  }
  .product-final-cta__title { font-size: 24px; line-height: 1.3; }
  .product-card__content {
    padding: 16px;
    gap: 8px;
  }

  .product-card__meta {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .product-card__title {
    font-size: 18px;
    line-height: 1.35;
  }

  .product-card__description {
    font-size: 13px;
    line-height: 1.6;
  }

  .product-card__actions {
    flex-direction: column;
    gap: 10px;
  }

  .product-card__actions .btn {
    width: 100%;
    height: 44px;
  }

  .products-hero {
    padding-block: 48px 36px;
  }

  .products-hero__container {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .products-hero__title {
    font-size: 32px;
    line-height: 1.18;
    letter-spacing: -0.3px;
  }

  .products-hero__subtitle {
    font-size: 15px;
    line-height: 1.75;
    margin-top: 12px;
  }

  .products-hero__summary {
    padding: 18px;
    border-radius: 16px;
  }

  .products-hero::before {
    opacity: 0.035;
  }
}

/* =========================
   Product Detail Page — responsive
========================= */

@media (max-width: 767px) {
  .product-breadcrumbs { padding-block: 16px 0; }
  .product-breadcrumbs__list {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: none;
    font-size: 12px;
  }

  .product-hero { padding-block: 28px 44px; }
  .product-hero__container {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr !important;
    grid-template-areas: "media" "summary" !important;
    gap: 28px;
  }
  .product-hero__title {
    font-size: 32px;
    line-height: 1.18;
    letter-spacing: -0.3px;
  }
  .product-hero__description {
    font-size: 15px;
    line-height: 1.75;
    margin-top: 14px;
  }
  .product-hero__actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }
  .product-hero__actions .btn {
    width: 100%;
    height: 48px;
  }

  .product-gallery {
    padding: 16px;
    border-radius: 18px;
  }
  .product-gallery__main {
    min-height: 260px;
    padding: 18px;
    border-radius: 14px;
  }
  .product-gallery__image { max-height: 220px; }
  .product-gallery__thumb {
    width: 66px;
    height: 58px;
  }

  .product-quick-specs { padding-block: 0 40px; }
  .product-quick-specs__grid {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .quick-spec-card {
    padding: 12px;
    border-radius: 14px;
    min-height: 100px;
    gap: 6px;
  }
  .quick-spec-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .quick-spec-icon svg {
    width: 15px;
    height: 15px;
  }
  .quick-spec-label {
    font-size: 11px;
  }
  .quick-spec-value {
    font-size: 15px;
  }

  .product-content { padding-block: 16px 48px; }
  .product-content__layout {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "sidebar" !important;
    gap: 24px;
  }
  .product-content__sidebar { position: static; }

  .product-quote-card {
    padding: 18px;
    border-radius: 16px;
  }
  .product-quote-card__actions .btn { height: 48px; }

  .product-section-card {
    padding: 18px;
    border-radius: 16px;
  }
  .product-section-title { font-size: 20px; }

  .product-specs { padding: 18px; border-radius: 16px; }
  .product-specs__row {
    display: grid;
    gap: 4px;
    padding-block: 12px;
  }
  .product-specs__label, .product-specs__value {
    width: auto;
    padding: 0;
  }
  .product-specs__label { font-size: 13px; }
  .product-specs__value { font-size: 14px; }

  .product-applications__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .application-item { padding: 12px; }

  .product-features__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-downloads { padding: 18px; border-radius: 16px; }
  .download-file {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }
  .download-file__action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .product-faq { padding: 18px; border-radius: 16px; }
  .product-faq__item { padding: 16px; }
  .product-faq__question { font-size: 15px; line-height: 1.5; }
  .product-faq__answer { font-size: 14px; line-height: 1.7; }

  .product-final-cta { padding-block: 0 48px; }
  .product-final-cta__panel {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 18px;
    gap: 20px;
  }
  .product-final-cta__title { font-size: 24px; line-height: 1.3; }
  .product-final-cta__body { font-size: 14px; line-height: 1.7; }
  .product-final-cta__actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .product-final-cta__actions .btn {
    width: 100%;
    height: 48px;
    margin: 0;
  }
}

@media (max-width: 380px) {
  .product-quick-specs__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Request Quote Responsive
========================= */

@media (max-width: 1023px) {
  .quote-hero__container {
    width: min(100% - 48px, var(--container-default));
  }
  .quote-form-card {
    padding: 28px;
  }
}

@media (max-width: 767px) {
  .quote-hero {
    padding-block: 48px 32px;
  }
  .quote-hero::before {
    opacity: 0.035;
  }
  .quote-hero__container {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .quote-hero__title {
    font-size: 32px;
    line-height: 1.18;
    letter-spacing: -0.3px;
  }
  .quote-hero__subtitle {
    font-size: 15px;
    line-height: 1.75;
    margin-top: 12px;
  }
  .quote-hero__info-card {
    padding: 18px;
    border-radius: 16px;
  }

  .quote-form-section {
    padding-block: 24px 48px;
  }
  .quote-form-layout {
    width: min(100% - 32px, var(--container-default));
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "side";
    gap: 24px;
  }

  .quote-form-side {
    position: static;
    gap: 14px;
  }
  .quote-help-card,
  .quote-whatsapp-card {
    padding: 18px;
    border-radius: 16px;
  }

  .quote-form-card {
    padding: 18px;
    border-radius: 16px;
  }
  .quote-form-card__title {
    font-size: 22px;
  }
  .quote-form-card__intro {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .quote-form {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .quote-form__submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .quote-submit-btn {
    width: 100%;
    height: 50px;
  }
  .quote-submit-note {
    max-width: none;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .quote-hero__container {
    width: min(100% - 28px, var(--container-default));
  }
}

/* =========================
   Thank You Page Responsive
========================= */

@media (max-width: 767px) {
  .thank-you-page {
    padding-block: 48px;
  }
  .thank-you-container {
    width: min(100% - 32px, var(--container-default));
  }
  .thank-you-card {
    padding: 32px 24px;
    border-radius: 16px;
  }
  .thank-you-card__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
  }
  .thank-you-card__title {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .thank-you-card__message {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 24px;
  }
  .thank-you-card__btn {
    width: 100%;
  }
}

/* =========================
   Contact Page Responsive
========================= */

@media (max-width: 1023px) {
  .contact-content__layout {
    grid-template-columns: 1fr;
  }

  [dir="rtl"] .contact-content__layout,
  [dir="ltr"] .contact-content__layout {
    grid-template-areas:
      "guidance"
      "cards";
  }

  .contact-guidance {
    position: static;
  }
}

@media (max-width: 767px) {
  .contact-hero {
    padding-block: 48px 32px;
  }
  .contact-hero__container {
    width: min(100% - 32px, var(--container-default));
  }
  .contact-hero__title {
    font-size: 32px;
    margin-bottom: 12px;
  }
  .contact-hero__subtitle {
    font-size: 15px;
  }

  .contact-content {
    padding-top: 40px;
  }
  .contact-content__layout {
    width: min(100% - 32px, var(--container-default));
    gap: 32px;
  }

  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .contact-guidance__box {
    padding: 24px 20px;
    border-radius: 16px;
  }
  .contact-guidance__title {
    font-size: 20px;
  }
  .contact-guidance__text {
    font-size: 14px;
  }
}

/* =========================
   About Page Responsive
========================= */

@media (max-width: 767px) {
  .about-hero {
    padding-block: 48px 40px;
  }
  .about-hero__container {
    width: min(100% - 32px, var(--container-default));
  }
  .about-hero__title {
    font-size: 36px;
    margin-bottom: 12px;
  }
  .about-hero__subtitle {
    font-size: 15px;
  }

  .about-intro {
    padding-block: 48px;
  }
  .about-intro__container {
    width: min(100% - 32px, var(--container-default));
  }
  .about-text {
    font-size: 15px;
  }

  .about-vision {
    padding-block: 0 48px;
  }
  .about-vision__container {
    width: min(100% - 32px, var(--container-default));
  }
  .vision-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vision-card {
    padding: 32px 24px;
    text-align: start;
  }
  .about-help-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about-industries-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-cta {
    padding-block: 24px 48px;
  }
  .about-cta__container {
    width: min(100% - 32px, var(--container-default));
  }
  .about-cta__box {
    padding: 40px 24px;
  }
  .about-cta__title {
    font-size: 24px;
  }
  .about-cta__text {
    font-size: 15px;
    margin-bottom: 24px;
  }
  .about-cta__actions {
    flex-direction: column;
    gap: 12px;
  }
  .about-cta__actions .btn {
    width: 100%;
  }

  .home-process__grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .product-specs-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}