/*
 * Peddlo mobile.css — responsive overrides only.
 * All rules live inside @media blocks. Never modifies desktop CSS.
 * Overrides every fixed-px offender found in styles.css and homepage-premium.css.
 */

/* ─────────────────────────────────────────────────────────────────
   ≤ 768px  — phones + small tablets (portrait)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Base overflow guard ── */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  img, svg, video, canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Wrapper ── */
  .p-wrap {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ── Header & nav ── */
  .p-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .p-brand {
    min-width: 0 !important;
    width: auto !important;
  }

  .p-brand img[src="/frontend/assets/peddlo-logo-header.png"] {
    width: 100px !important;
    height: auto !important;
  }

  footer img[src="/frontend/assets/peddlo-logo-footer.png"] {
    width: 120px !important;
    height: auto !important;
  }

  .p-nav {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .p-nav a {
    white-space: nowrap !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .language-selector {
    white-space: normal !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .language-selector select {
    min-width: 0 !important;
    width: auto !important;
  }

  /* ── Hero grids — kill the hard minimum column widths ── */
  .p-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  body.page-sign-in .p-hero-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.page-home) .p-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .p-hero h1,
  .p-hero-carousel h1,
  body.page-sign-in .p-hero h1,
  body:not(.page-home) .p-hero h1 {
    max-width: 100% !important;
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
  }

  .p-hero-copy,
  body.page-sign-in .p-hero-copy {
    max-width: 100% !important;
    width: 100% !important;
  }

  .p-hero-copy p,
  .p-hero-carousel p,
  body.page-sign-in .p-hero-copy p,
  body:not(.page-home) .p-hero-copy p {
    max-width: 100% !important;
  }

  .p-actions {
    flex-direction: column !important;
  }

  .p-actions .p-btn {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
  }

  /* ── Hero visuals — decorative only, hide on mobile ── */
  .p-visual,
  .premium-bag-visual,
  .p-visual-card,
  .p-mini-brand,
  .curve-a, .curve-b, .curve-c,
  .p-orbit-one, .p-orbit-two,
  .p-bag-front, .p-bag-back,
  .p-flow-line,
  .p-offer-stack i,
  .flow-connector {
    display: none !important;
  }

  /* ── Carousel slide layout ── */
  .p-hero-slide-content {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    height: auto !important;
  }

  .p-hero-banner-image-seller img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* ── Section grids ── */
  .p-section-grid,
  body.page-how-it-works main section.p-section .p-section-grid,
  html body.page-how-it-works main section.p-section .p-section-grid,
  .page-how-it-works .p-section-grid,
  .page-questions .p-section-grid,
  .how-section-grid,
  .how-boundary-grid,
  .how-flow-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .p-section h2,
  .p-section-copy p {
    max-width: 100% !important;
  }

  /* ── Cards ── */
  .p-card,
  .p-card-grid,
  .flow-section .p-card,
  .flow-section .p-card-grid,
  section.flow-section .p-card,
  section.flow-section .p-card-grid,
  .page-how-it-works .p-card,
  .page-how-it-works .p-card-grid,
  .page-how-it-works .p-section:first-of-type .p-card,
  .page-how-it-works .p-section:not(.flow-section) .p-card,
  .page-how-it-works .p-section:not(.flow-section) .p-card-grid,
  .page-how-it-works .flow-section .p-card,
  .page-how-it-works .flow-section .p-card-grid,
  main > .p-section:first-of-type .p-card,
  main > .p-section:nth-of-type(2) .p-card,
  section.p-section:not(.flow-section) .p-card,
  section.p-section:not(.flow-section) .p-card-grid,
  body.page-how-it-works main section.p-section .p-card,
  body.page-how-it-works main section.p-section .p-card-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    padding-left: 0 !important;
  }

  .flow-section .p-card:not(:last-child)::after {
    display: none !important;
  }

  /* ── Market power / "Why Peddlo" ── */
  .market-power-grid,
  .page-home .market-power .market-power-grid {
    grid-template-columns: 1fr !important;
  }

  .market-power-copy h2,
  .market-power-copy p,
  .page-home .market-power .market-power-copy h2,
  .page-home .market-power .market-power-copy p {
    max-width: 100% !important;
  }

  .page-home .market-power .market-power-cards {
    grid-template-columns: 1fr !important;
  }

  .page-home .market-power .market-power-cards > article {
    min-height: 0 !important;
    height: auto !important;
  }

  .market-power-statement {
    max-width: 100% !important;
  }

  /* ── Global band ── */
  .p-global-band {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    height: auto !important;
  }

  .p-map {
    min-height: 240px !important;
    height: auto !important;
  }

  .p-map-arc {
    display: none !important;
  }

  .p-global-copy h2,
  .p-global-copy p {
    max-width: 100% !important;
  }

  /* ── Footer ── */
  .p-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .p-footer p {
    max-width: 100% !important;
  }

  /* ── Interaction / sign-in / access ── */
  .interaction-grid {
    grid-template-columns: 1fr !important;
  }

  .interaction-hero h1,
  .interaction-hero p {
    max-width: 100% !important;
  }

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

  .contact-support > p {
    max-width: 100% !important;
  }

  .access-layout,
  .page-sign-in .access-layout.access-stack {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
  }

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

  .access-heading,
  .page-sign-in .access-heading {
    max-width: 100% !important;
    width: 100% !important;
  }

  .access-heading h2 {
    max-width: 100% !important;
  }

  .access-heading p {
    max-width: 100% !important;
  }

  .route-cards,
  .page-sign-in .route-cards {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .page-sign-in .access-block {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .page-sign-in .access-block-copy p {
    max-width: 100% !important;
  }

  .page-sign-in .access-login-block .intake-form {
    grid-template-columns: 1fr !important;
  }

  .page-sign-in .interaction-hero p {
    max-width: 100% !important;
  }

  /* ── Sign-in hero ── */
  body.page-sign-in .p-hero-copy {
    max-width: 100% !important;
    width: 100% !important;
  }

  body.page-sign-in .p-hero h1 {
    max-width: 100% !important;
    width: 100% !important;
  }

  body.page-sign-in .p-hero-copy p {
    max-width: 100% !important;
  }

  /* ── Forms ── */
  .intake-form,
  .launch-form {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .intake-form input,
  .intake-form select,
  .intake-form textarea,
  .launch-form input,
  .launch-form select,
  .launch-form textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  .intake-form button,
  .launch-form button {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* ── Category / region ── */
  .category-tile-grid,
  .region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .region-grid article {
    height: auto !important;
    min-height: 0 !important;
  }

  .category-choice-grid {
    grid-template-columns: 1fr !important;
    max-height: none !important;
    height: auto !important;
  }

  .region-principles,
  .area-principles {
    max-width: 100% !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .shopping-area-list,
  .regional-market-list {
    max-width: 100% !important;
    width: 100% !important;
  }

  .category-multiselect,
  .region-multiselect {
    max-height: 200px !important;
    min-height: 80px !important;
    height: auto !important;
  }

  /* ── Demand / product pages ── */
  .demand-public-section .p-section-grid,
  .workflow-demand-section .p-section-grid,
  .demand-home-section .p-section-grid,
  .p-site .demand-home-section .p-section-grid {
    grid-template-columns: 1fr !important;
  }

  .demand-public-section .p-section-copy,
  .demand-public-section .p-section-copy h2,
  .demand-public-section .p-section-copy p {
    max-width: 100% !important;
    width: 100% !important;
  }

  .demand-home-section .p-card-grid,
  .p-site .demand-home-section .p-card-grid {
    grid-template-columns: 1fr !important;
  }

  .demand-home-section .p-card,
  .p-site .demand-home-section .p-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .p-search-grid,
  .p-product-search-panel {
    grid-template-columns: 1fr !important;
  }

  .p-search-field textarea {
    height: auto !important;
    min-height: 80px !important;
  }

  .p-products-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .p-products-hero h1,
  .p-products-hero p {
    max-width: 100% !important;
  }

  .p-product-search-panel-home::after {
    display: none !important;
  }

  .p-product-search-copy h2,
  .p-product-search-copy p {
    max-width: 100% !important;
  }

  .p-product-search-note {
    max-width: 100% !important;
    width: 100% !important;
  }

  .p-products-subhero p {
    max-width: 100% !important;
  }

  .p-account-next-step p {
    max-width: 100% !important;
  }

  .active-demand-arena .active-demand-intro {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Buyer/seller dashboard layout ── */
  .control-centre {
    grid-template-columns: 1fr !important;
    overflow-x: hidden !important;
  }

  .control-sidebar {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .control-sidebar a {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .control-nav-group summary,
  .control-nav-panel a {
    white-space: normal !important;
  }

  .control-topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .control-topbar p {
    max-width: 100% !important;
  }

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

  .dashboard-heading h1,
  .dashboard-heading p {
    max-width: 100% !important;
  }

  /* ── Tables — horizontal scroll, not reflow ── */
  .table-scroll-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll,
  .table-scroll-top {
    overflow-x: auto !important;
  }

  .table-scroll-top > div {
    width: auto !important;
    white-space: nowrap !important;
  }

  .dash-table {
    min-width: 600px !important;
    width: max-content !important;
  }

  .dash-table th {
    white-space: nowrap !important;
  }

  .action-table td:last-child {
    min-width: 180px !important;
  }

  /* ── Control panel ── */
  .control-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Row action menus ── */
  .row-action-menu {
    min-width: 0 !important;
    width: auto !important;
  }

  /* ── Auth shell ── */
  .auth-shell {
    max-width: 100% !important;
    width: 100% !important;
    margin: 40px auto !important;
    padding: 0 14px !important;
  }

  /* ── Legal / content ── */
  .legal-doc {
    max-width: 100% !important;
    width: 100% !important;
  }

  .compact-head {
    max-width: 100% !important;
    width: 100% !important;
  }

  .cluster-card.compact {
    max-width: 100% !important;
    width: 100% !important;
  }

  .warning-panel {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Search / filter ── */
  .owner-search-wrap {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .owner-search-wrap input[type="text"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Action stacks ── */
  .action-stack,
  .compact-account-actions,
  .msg-row-actions {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .action-stack .p-btn,
  .compact-account-actions .p-btn {
    width: 100% !important;
  }

  .inline-action-form {
    display: block !important;
    width: 100% !important;
  }

  /* ── Touch targets ── */
  .p-btn,
  button,
  [role="button"] {
    min-height: 44px !important;
  }

  a.p-btn,
  a[class*="btn"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── Trust section cards ── */
  .trust-section .p-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── How-it-works flow ── */
  .page-how-it-works .flow-section .p-card-grid,
  .page-how-it-works .flow-section .p-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .flow-connector {
    display: none !important;
  }

  /* ── How-section-grid ── */
  .how-section-grid > *:last-child {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Page questions card grid ── */
  .page-questions .p-card-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Overview stat strip ── */
  .ov-stat-strip {
    padding: 1rem 1rem 0 !important;
    gap: .5rem !important;
  }

  .ov-stat-card {
    min-width: calc(50% - .5rem) !important;
    flex: 1 1 calc(50% - .5rem) !important;
  }

  .ov-two-col {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }

  .ov-quick-actions {
    padding: 1rem !important;
    gap: .5rem !important;
  }

  .ov-quick-actions .p-btn {
    flex: 1 1 calc(50% - .5rem) !important;
    min-width: 0 !important;
    font-size: .78rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   ≤ 480px  — portrait phones (small)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .p-hero h1,
  .interaction-hero h1 {
    font-size: clamp(1.6rem, 8.5vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }

  .p-section h2 {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important;
  }

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

  .category-tile-grid,
  .region-grid {
    grid-template-columns: 1fr !important;
  }

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

  .p-btn {
    font-size: .85rem !important;
  }

  .ov-stat-card {
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .dash-table {
    font-size: .78rem !important;
  }

  .intake-form {
    padding: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   769px – 1024px  — tablets (landscape + small laptops)
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Hero: two columns OK but kill fixed px minimums */
  .p-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  /* Section grids: allow two columns but fluid */
  .p-section-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Demand cards: two fluid columns */
  .demand-home-section .p-card-grid,
  .p-site .demand-home-section .p-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .demand-home-section .p-card,
  .p-site .demand-home-section .p-card {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Footer: reduce from 4-5 cols to 2-3 */
  .p-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Dashboard sidebar: keep but make narrower */
  .control-centre {
    grid-template-columns: 160px minmax(0, 1fr) !important;
  }

  /* Card width: fluid */
  .p-card,
  .p-card-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Market power: side by side OK but fluid */
  .market-power-grid,
  .page-home .market-power .market-power-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /* Access layout: fluid two-col */
  .access-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /* Tables: still scroll */
  .table-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}