/* ORION unified mobile optimization layer — 2026-07-15 */
:root { --mobile-gutter: clamp(14px, 4vw, 22px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; max-width: 100%; }
button, [role="button"], a.button, .button { touch-action: manipulation; }

/* Prevent long values, IDs and URLs from forcing horizontal overflow. */
p, li, td, th, label, .card, .panel, .admin-panel, .form-card { overflow-wrap: anywhere; }

/* Charts and visual panels scale inside the viewport. */
canvas { display: block; width: 100% !important; max-height: min(420px, 62vh); }
.chart-container, [class*="chart-container"], [class*="chart-wrap"], [class*="chart-panel"],
.admin-chart-modal__body, #admin-chart-body, #admin-report-chart-body {
  width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.chart-container > *, [class*="chart-wrap"] > *, [class*="chart-panel"] > * { min-width: 0; max-width: 100%; }

/* Tables remain usable instead of breaking the page. */
.admin-table-scroll, .table-scroll, .table-responsive, [class*="table-scroll"] {
  width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; overscroll-behavior-inline: contain;
}
table { max-width: 100%; }

@media (max-width: 767px) {
  body { min-width: 0; }
  main, section, article, aside, header, footer, form, fieldset { min-width: 0; }

  /* Consistent page gutters */
  .container, .site-container, .page-container, .section-inner, .hero-inner,
  .admin-page-main, .admin-topbar, .profile-shell, .chat-shell {
    width: 100%; max-width: 100%; padding-inline: var(--mobile-gutter);
  }
  section { scroll-margin-top: 84px; }

  /* Typography */
  h1 { font-size: clamp(1.9rem, 9vw, 2.75rem); line-height: 1.08; }
  h2 { font-size: clamp(1.55rem, 7vw, 2.15rem); line-height: 1.15; }
  h3 { font-size: clamp(1.15rem, 5vw, 1.45rem); }
  .eyebrow { letter-spacing: .12em; }

  /* Touch-safe controls and iOS zoom prevention */
  input, select, textarea { width: 100%; min-height: 48px; font-size: 16px !important; }
  textarea { min-height: 120px; resize: vertical; }
  input[type="checkbox"], input[type="radio"] { width: 22px; min-height: 22px; }
  button, .button, .btn, [class*="button"], [class*="-btn"] { min-height: 44px; }
  form button[type="submit"], .form-actions .button, .form-actions button { width: 100%; }
  .form-row, .form-grid, [class*="form-grid"], [class*="field-grid"], .input-row,
  .admin-form-grid, .admin-filter-row, .admin-toolbar { grid-template-columns: 1fr !important; }
  .form-actions, .button-row, .admin-form-actions, .admin-chart-modal__actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  }

  /* Cards and grids */
  .card-grid, .service-grid, .feature-grid, .pricing-grid, .testimonial-grid,
  .dashboard-grid, .stats-grid, .admin-stat-grid, .admin-stat-grid-wide,
  .admin-dashboard-grid, .profile-grid, [class*="cards-grid"], [class*="card-grid"] {
    grid-template-columns: 1fr !important;
  }
  .card, .panel, .admin-panel, .form-card, .service-card, .pricing-card,
  .admin-stat-card { max-width: 100%; border-radius: 18px; }

  /* Admin shell */
  .admin-main-column { width: 100%; min-width: 0; margin-left: 0 !important; }
  .admin-page-main { padding-top: 18px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .admin-page-heading { display: grid !important; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
  .admin-page-heading h2 { margin-top: 2px; }
  .admin-count-badge { align-self: start; }
  .admin-panel { padding: 14px; }
  .admin-stat-card { padding: 16px; }
  .admin-topbar { min-height: 64px; padding-top: env(safe-area-inset-top); }
  .admin-sidebar { width: min(86vw, 310px) !important; max-width: 310px; }

  /* Admin tables: preserve all columns with a controlled swipe area. */
  .admin-data-table { width: max-content; min-width: 760px; font-size: .84rem; }
  .admin-data-table th, .admin-data-table td { padding: 11px 10px; white-space: normal; max-width: 230px; }
  .admin-data-table th { position: sticky; top: 0; z-index: 1; }
  .admin-table-action { white-space: nowrap; width: auto; }

  /* Dialogs / editors */
  [class*="modal__panel"], [class*="dialog__panel"], .admin-chart-modal__panel {
    width: calc(100% - 20px) !important; max-width: none !important; max-height: calc(100dvh - 20px);
    margin: 10px; border-radius: 18px; overflow: auto;
  }
  .admin-chart-modal__header { display: grid; gap: 12px; padding: 16px; }
  .admin-chart-modal__body { padding: 12px; }

  /* Mobile chart minimum working width; user can swipe only inside chart. */
  .admin-chart-modal__body > svg, #admin-chart-body > svg, #admin-report-chart-body > svg {
    min-width: 560px; width: 560px; height: auto;
  }

  /* Header/nav resilience */
  .site-header, header.site-header { padding-top: env(safe-area-inset-top); }
  .brand, .site-brand, .logo { min-width: 0; }
  .brand img, .site-brand img, .logo img { flex: 0 0 auto; }
  .brand span, .site-brand span, .brand-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav-links, .site-nav { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }

  /* Hero and decorative media */
  .hero, [class*="hero-section"] { min-height: auto; }
  .hero-content, .hero-grid { grid-template-columns: 1fr !important; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-actions .button, .hero-actions button { width: 100%; }

  /* Chat layout */
  .chat-page, .chat-main, .chat-panel, .chat-workspace { width: 100%; min-width: 0; }
  .chat-layout, .chat-grid { grid-template-columns: 1fr !important; }
  .chat-messages, [class*="messages-list"] { padding-inline: 12px; }
  .message, .chat-message, [class*="message-bubble"] { max-width: 88% !important; overflow-wrap: anywhere; }
  .chat-composer, [class*="composer"] {
    position: sticky; bottom: 0; z-index: 5; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  /* Footer */
  .footer-grid, .site-footer-grid { grid-template-columns: 1fr !important; }
  footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@media (max-width: 479px) {
  :root { --mobile-gutter: 14px; }
  .admin-page-heading { grid-template-columns: 1fr; }
  .admin-count-badge { justify-self: start; }
  .admin-panel, .card, .form-card { padding: 14px; }
  .admin-data-table { min-width: 680px; }
  .message, .chat-message, [class*="message-bubble"] { max-width: 92% !important; }
}

@media (max-width: 360px) {
  h1 { font-size: 1.8rem; }
  .admin-panel, .card, .form-card { padding: 12px; }
}

/* Horoscope and tool-page viewport containment patch — 2026-07-15 */
@media (max-width: 767px) {
  .horoscope-page,
  .horoscope-page .page-shell,
  .horoscope-page main,
  .horoscope-page .section,
  .horoscope-page .container,
  .horoscope-page .horoscope-panel,
  .horoscope-page .horoscope-sign-grid,
  .horoscope-page .horoscope-personal-layout,
  .horoscope-page .horoscope-personal-result,
  .horoscope-page .horoscope-detail,
  .horoscope-page .hz-reading,
  .horoscope-page .hz-hero,
  .horoscope-page .hz-section,
  .horoscope-page .hz-areas,
  .horoscope-page .hz-split,
  .horoscope-page .hz-timings,
  .horoscope-page .hz-compare,
  .horoscope-page .hz-hours-split,
  .horoscope-page .hz-gochar,
  .horoscope-page .hz-hora-windows,
  .horoscope-page .horoscope-meta-grid,
  .horoscope-page .horoscope-areas {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Keep the site's original centred gutter model; avoid width + padding conflicts. */
  .horoscope-page .container,
  .kundali-page .container,
  .life-report-page .container,
  .timing-page .container {
    width: calc(100% - (var(--mobile-gutter) * 2));
    padding-inline: 0;
    margin-inline: auto;
  }

  .horoscope-page .horoscope-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .horoscope-page .horoscope-tab {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .horoscope-page .horoscope-sign-card,
  .horoscope-page .horoscope-area-card,
  .horoscope-page .horoscope-meta-item,
  .horoscope-page .hz-card,
  .horoscope-page [class^="hz-"],
  .horoscope-page [class*=" hz-"] {
    min-width: 0;
    max-width: 100%;
  }

  .horoscope-page .horoscope-sign-name,
  .horoscope-page .horoscope-sign-short,
  .horoscope-page .horoscope-sign-blurb,
  .horoscope-page .hz-title,
  .horoscope-page .hz-para,
  .horoscope-page .hz-note,
  .horoscope-page .hz-label,
  .horoscope-page .hz-value,
  .horoscope-page strong,
  .horoscope-page span,
  .horoscope-page p,
  .horoscope-page li,
  .horoscope-page a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .horoscope-page .kundali-coord-fields,
  .horoscope-page .kundali-geo-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .horoscope-page .kundali-coords,
  .horoscope-page .kundali-place-option {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Generated hora tables become a local swipe region instead of widening the page. */
  .horoscope-page .hz-hora-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    border-collapse: separate;
    border-spacing: 0;
  }

  .horoscope-page .hz-hora-table thead,
  .horoscope-page .hz-hora-table tbody {
    display: table;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }

  .horoscope-page .hz-hora-table th,
  .horoscope-page .hz-hora-table td {
    min-width: 7.25rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .horoscope-page .hz-hora-table th:first-child,
  .horoscope-page .hz-hora-table td:first-child {
    min-width: 5.75rem;
  }

  .horoscope-page .hz-rating,
  .horoscope-page .hz-badge,
  .horoscope-page .horoscope-rating,
  .horoscope-page .horoscope-rating-pill {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
  }

  /* Generic fallback for generated tool content. */
  .kundali-page table,
  .life-report-page table,
  .timing-page table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  .horoscope-page .horoscope-sign-grid {
    grid-template-columns: 1fr;
  }

  .horoscope-page .horoscope-tabs {
    grid-template-columns: 1fr;
  }

  .horoscope-page .hz-reading,
  .horoscope-page .horoscope-form,
  .horoscope-page .horoscope-area-card,
  .horoscope-page .horoscope-meta-item {
    padding-inline: 0.75rem;
  }
}

/* Hide the complete premium report demo on mobile without changing desktop markup. */
@media (max-width: 768px) {
  .premium-demo-section {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 2026-07-15: Homepage report showcase + How It Works mobile correction */
@media (max-width: 767px) {
  .report-showcase-image {
    box-sizing: border-box;
    width: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1600 / 650;
    margin: 32px auto 52px !important;
    overflow: visible;
    border-radius: 14px;
    background-color: #fffaf0;
    background-size: contain !important;
    background-position: center top !important;
  }

  .report-demo-button {
    left: 12px !important;
    right: 12px !important;
    bottom: -64px !important;
    width: auto !important;
    max-width: none !important;
    height: 58px;
    min-height: 58px;
    padding: 0 22px;
  }

  .report-demo-button span {
    font-size: 20px;
  }

  .how-section {
    overflow: hidden;
    padding-top: 58px !important;
  }

  .how-section .container,
  .how-section .section-heading {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .how-section .section-heading {
    box-sizing: border-box;
    padding-inline: 16px;
    margin-bottom: 34px !important;
  }

  .how-section .eyebrow {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .18em;
  }

  .how-section .section-heading h2 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 14px;
    padding: 0;
    font-size: clamp(2.15rem, 11vw, 3.1rem) !important;
    line-height: .98 !important;
    letter-spacing: -.025em;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
  }

  .process-subtitle {
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    padding-inline: 2px;
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .report-showcase-image {
    width: calc(100% - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-top: 26px !important;
    margin-bottom: 50px !important;
  }

  .how-section .section-heading {
    padding-inline: 10px;
  }

  .how-section .section-heading h2 {
    font-size: clamp(2rem, 10.7vw, 2.65rem) !important;
  }
}