/**
 * DramFolio — Mobile Polish (shared across all pages)
 * Fixes touch targets, typography, spacing, and layout at mobile viewports.
 * Loaded alongside mobile-nav.js on every page.
 */

/* ── GLOBAL MOBILE FIXES ─────────────────────────────────── */

/* Ensure tap targets are at least 44px */
@media (max-width: 768px) {
  a, button, [role="button"], select, input[type="submit"],
  input[type="button"], .btn, .btn-primary, .btn-outline {
    min-height: 44px;
  }

  /* Prevent text size boost on iOS */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Prevent horizontal overflow on all pages */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Base typography scaling */
  body {
    font-size: 16px; /* Prevents iOS zoom on input focus */
  }

  /* Inputs should be 16px+ to prevent iOS zoom */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── LANDING PAGE (index.html) ────────────────────────────── */

@media (max-width: 768px) {
  /* Hero section */
  .hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    letter-spacing: -1px !important;
    line-height: 1.12 !important;
  }

  .hero-sub {
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding: 0 8px;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 12px;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary,
  .hero-actions .btn-hero-primary {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
  }

  .hero-badge {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }

  /* Price ticker */
  .price-ticker-strip {
    margin-top: 20px !important;
  }

  .ticker-chip {
    font-size: 12px !important;
    padding: 6px 12px !important;
    gap: 6px !important;
  }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }

  .stat-number {
    font-size: 28px !important;
  }

  .stat-label {
    font-size: 12px !important;
  }

  /* Trust section */
  .trust-grid,
  .trust-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Features/bento */
  .bento-grid {
    grid-template-columns: 1fr !important;
  }

  .bento-card.bento-wide {
    grid-column: span 1 !important;
  }

  /* Pricing cards */
  .pricing-cards {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding: 0 8px;
  }

  .pricing-card {
    padding: 24px 20px !important;
  }

  /* Section padding */
  .features-section,
  .how-section,
  .pricing-section,
  .faq-section,
  .final-cta,
  .trust-section,
  .insights-strip-section {
    padding: 56px 16px !important;
  }

  /* Steps grid */
  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .steps-grid::before {
    display: none !important;
  }

  /* Showcase table */
  .showcase-content {
    grid-template-columns: 1fr !important;
  }

  .showcase-table {
    grid-column: span 1 !important;
  }

  .showcase-table-header,
  .showcase-table-row {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column !important;
    gap: 20px !important;
    text-align: center !important;
  }

  .footer-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  .footer-links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* FAQ */
  .faq-question {
    padding: 18px 16px !important;
    font-size: 15px !important;
    min-height: 52px !important;
  }

  .faq-answer {
    padding: 0 16px 18px !important;
    font-size: 14px !important;
  }

  /* Container padding */
  .container {
    padding: 0 16px !important;
  }

  /* Mobile sticky CTA bar */
  .mobile-sticky-cta-bar {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-sticky-cta-bar .btn-primary,
  .mobile-sticky-cta-bar a {
    font-size: 14px !important;
    padding: 14px 20px !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
}

/* ── DASHBOARD (dashboard.html) ───────────────────────────── */

@media (max-width: 768px) {
  /* Dashboard nav */
  .nav-left {
    gap: 12px !important;
  }

  .nav-logo {
    font-size: 18px !important;
  }

  /* Insights strip */
  .insights-strip,
  .insights-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .insight-card {
    padding: 14px !important;
  }

  .insight-label {
    font-size: 11px !important;
  }

  .insight-value {
    font-size: 16px !important;
  }

  /* Portfolio stats cards */
  .stats-row,
  .portfolio-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .stat-card {
    padding: 16px !important;
  }

  /* Item cards */
  .items-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Modals */
  .modal-content,
  .modal-body {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    margin: auto !important;
    border-radius: 12px !important;
  }

  /* Dashboard section spacing */
  .dashboard {
    padding: 16px !important;
  }

  .section-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .section-header h2 {
    font-size: 20px !important;
  }

  /* Add item button - compact on mobile */
  .nav-actions .btn-primary {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  .nav-actions .btn-primary svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 480px) {
  .insights-strip,
  .insights-grid {
    grid-template-columns: 1fr !important;
  }

  .stats-row,
  .portfolio-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ── BOTTLES / CATALOG (bottles.html) ─────────────────────── */

@media (max-width: 768px) {
  /* Header padding */
  header .container {
    padding: 12px 16px !important;
  }

  header .container .flex {
    gap: 12px !important;
  }

  /* Filter bar */
  .filter-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .filter-input {
    min-width: unset !important;
    width: 100% !important;
  }

  .filter-bar select {
    width: 100% !important;
  }

  /* Cards grid */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
  [class*="grid-cols-3"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card {
    padding: 18px !important;
  }

  /* Pagination */
  .pagination {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .pagination button,
  .pagination a {
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* Hero / page header */
  .page-header,
  .catalog-header {
    padding: 24px 16px 20px !important;
  }

  .page-header h1,
  .catalog-header h1 {
    font-size: clamp(1.6rem, 5vw, 2rem) !important;
  }

  /* Activation banner */
  .activation-banner {
    margin: 12px 16px !important;
    padding: 16px !important;
    font-size: 14px !important;
  }
}

/* ── BOTTLE DETAIL (bottle.html) ──────────────────────────── */

@media (max-width: 768px) {
  .bottle-hero,
  .bottle-detail {
    padding: 20px 16px !important;
  }

  .bottle-hero h1 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
    line-height: 1.2 !important;
  }

  /* Price range bar */
  .price-range-bar {
    margin: 16px 0 !important;
  }

  /* Auction table */
  .auction-table {
    font-size: 13px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .auction-table table {
    min-width: 400px !important;
  }

  .auction-table th,
  .auction-table td {
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }

  /* Trend indicator */
  .trend-indicator {
    font-size: 14px !important;
  }

  /* Add to portfolio button */
  .add-to-portfolio-btn,
  .bottle-cta {
    width: 100% !important;
    padding: 16px !important;
    font-size: 15px !important;
  }
}

/* ── CALCULATOR (calculator.html) ─────────────────────────── */

@media (max-width: 768px) {
  .hero {
    padding: 32px 16px 24px !important;
  }

  .hero-title {
    font-size: clamp(1.6rem, 5.5vw, 2.4rem) !important;
  }

  .trust-bar {
    gap: 12px !important;
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
  }

  .trust-item {
    font-size: 12px !important;
  }

  .main-wrap {
    margin: 0 auto !important;
    padding: 0 16px !important;
  }

  .main-card {
    padding: 20px !important;
    margin: 16px 0 !important;
  }

  .result-card {
    padding: 16px !important;
  }

  /* Search input */
  .search-input,
  .calc-input {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }

  /* CTA buttons */
  .calc-cta,
  .calculator-cta {
    width: 100% !important;
    padding: 16px !important;
    font-size: 15px !important;
  }
}

/* ── BLOG PAGES ───────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Blog nav */
  .nav .nav-links {
    display: none !important;
  }

  /* Blog hero */
  .blog-hero {
    padding: 80px 16px 40px !important;
  }

  .blog-hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
  }

  /* Blog grid */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Article content */
  .article-wrapper {
    padding: 80px 16px 40px !important;
  }

  .article-wrapper .container {
    max-width: 100% !important;
  }

  .article-content h2 {
    font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
  }

  .article-content h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important;
  }

  .article-content p,
  .article-content li {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* Article breadcrumb */
  .article-breadcrumb {
    font-size: 13px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* TOC if present */
  .toc-sidebar {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  /* Article CTA */
  .article-cta {
    padding: 24px 16px !important;
  }

  .article-cta .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── PORTFOLIO PUBLIC (portfolio-public.html) ─────────────── */

@media (max-width: 768px) {
  .portfolio-header {
    padding: 20px 16px !important;
  }

  .portfolio-header h1 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }

  .portfolio-items {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  .portfolio-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .portfolio-stats-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── LOGIN / SIGNUP / AUTH PAGES ──────────────────────────── */

@media (max-width: 768px) {
  .auth-card,
  .login-card,
  .signup-card {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 24px 20px !important;
    margin: 32px auto !important;
  }

  .auth-card h1,
  .login-card h1,
  .signup-card h1 {
    font-size: 24px !important;
  }

  .auth-card input,
  .login-card input,
  .signup-card input {
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  .auth-card .btn,
  .login-card .btn,
  .signup-card .btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
  }
}

/* ── WELCOME / ONBOARDING ─────────────────────────────────── */

@media (max-width: 768px) {
  .progress-bar {
    padding: 0 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .welcome-card,
  .onboarding-card {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 24px 20px !important;
  }

  .step-content {
    padding: 20px 16px !important;
  }
}

/* ── DEMO PORTFOLIO SECTION (index.html) ──────────────────── */

@media (max-width: 768px) {
  .demo-portfolio-section {
    padding: 56px 16px !important;
  }

  .demo-summary-strip {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .demo-summary-item + .demo-summary-item {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-top: 1px solid rgba(200, 132, 45, 0.1);
    padding-top: 12px;
  }

  .demo-bottles-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .demo-detail-inner {
    grid-template-columns: 1fr !important;
  }

  .demo-detail-cta {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .demo-detail-cta .btn-primary,
  .demo-detail-cta a {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .demo-bottles-grid {
    grid-template-columns: 1fr !important;
  }

  .demo-bottle-card {
    border-right: none !important;
  }
}

/* ── GENERAL UTILITY ──────────────────────────────────────── */

@media (max-width: 768px) {
  /* Ensure images don't overflow */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Tables should scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce horizontal padding universally */
  [style*="padding: 0 40px"],
  [style*="padding: 0 48px"],
  [style*="padding: 0 60px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Full-width buttons on mobile by default */
  .btn-full-mobile {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
}

/* ── SAFE AREA INSETS (notched phones) ────────────────────── */

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    body {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-sticky-cta-bar,
    .fixed-bottom-bar {
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}

/* ── SMALL PHONES (375px) ─────────────────────────────────── */

@media (max-width: 390px) {
  .hero h1 {
    font-size: 1.6rem !important;
  }

  .container {
    padding: 0 12px !important;
  }

  .stat-number {
    font-size: 24px !important;
  }

  .pricing-card {
    padding: 20px 16px !important;
  }

  .btn-primary, .btn-hero-primary {
    font-size: 14px !important;
    padding: 14px 18px !important;
  }
}