/* ============================================================
   InvestBenue – Responsive Design System
   The Benue Economic Investment Exchange
   Version: 1.0.0
   
   Breakpoints:
   xs:  < 480px   (small phones)
   sm:  480–639px (large phones)
   md:  640–767px (large phones / small tablets)
   lg:  768–1023px (tablets)
   xl:  1024–1279px (small laptops)
   2xl: 1280–1439px (laptops)
   3xl: 1440px+  (desktops)
   ============================================================ */

/* ============================================================
   1. CONTAINER RESPONSIVE PADDING
   ============================================================ */
@media (max-width: 1279px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (max-width: 1023px) {
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .section {
    padding: var(--space-20) 0;
  }

  .section-lg {
    padding: var(--space-24) 0;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .section {
    padding: var(--space-16) 0;
  }

  .section-sm {
    padding: var(--space-12) 0;
  }

  .section-lg {
    padding: var(--space-20) 0;
  }
}

@media (max-width: 479px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .section {
    padding: var(--space-12) 0;
  }
}

/* ============================================================
   2. GRID RESPONSIVE COLLAPSE
   ============================================================ */

/* 6-column grid */
@media (max-width: 1279px) {
  .grid-6 { grid-template-columns: repeat(4, 1fr); }
}

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

@media (max-width: 767px) {
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .grid-6 { grid-template-columns: 1fr; }
}

/* 5-column grid */
@media (max-width: 1279px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .grid-5 { grid-template-columns: 1fr; }
}

/* 4-column grid */
@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* 3-column grid */
@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* 2-column grid */
@media (max-width: 767px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Auto grids */
@media (max-width: 639px) {
  .grid-auto-sm {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .grid-auto-md {
    grid-template-columns: 1fr;
  }

  .grid-auto-lg {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   3. NAVBAR RESPONSIVE
   ============================================================ */

/* Hide desktop nav on tablet and below */
@media (max-width: 1023px) {
  .navbar-nav {
    display: none;
  }

  .navbar-hamburger {
    display: flex;
  }

  .navbar-actions .btn {
    display: none;
  }

  .navbar-actions .navbar-theme-toggle {
    display: flex;
  }

  .navbar-logo-tagline {
    display: none;
  }
}

@media (max-width: 479px) {
  .navbar-inner {
    padding: 0 var(--space-4);
  }

  .navbar-logo-name {
    font-size: 1rem;
  }
}

/* ============================================================
   4. FOOTER RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 639px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .footer {
    padding: var(--space-16) 0 var(--space-6);
  }
}

@media (max-width: 479px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .footer-legal {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .footer-nigeria-badge {
    display: none;
  }
}

/* ============================================================
   5. HERO SECTION RESPONSIVE
   ============================================================ */
@media (max-width: 1279px) {
  .hero-content-grid {
    gap: var(--space-12);
  }

  .hero-governor-image {
    max-width: 420px;
  }
}

@media (max-width: 1023px) {
  .hero-content-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-governor-wrap {
    display: flex;
    justify-content: center;
    order: -1;
  }

  .hero-governor-image {
    max-width: 360px;
    max-height: 480px;
  }

  .hero-text-content {
    align-items: center;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-stats-row {
    justify-content: center;
  }

  .hero-badge {
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .hero-section {
    min-height: auto;
    padding: calc(var(--nav-height) + var(--space-12)) 0 var(--space-16);
  }

  .hero-governor-image {
    max-width: 280px;
    max-height: 380px;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
    max-width: 320px;
  }

  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .hero-governor-image {
    max-width: 240px;
    max-height: 320px;
  }

  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* ============================================================
   6. SECTION HEADER RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .section-title {
    font-size: var(--text-3xl);
  }

  .section-header.centered .section-subtitle {
    font-size: var(--text-base);
  }
}

@media (max-width: 479px) {
  .section-title {
    font-size: var(--text-2xl);
  }
}

/* ============================================================
   7. CARD RESPONSIVE ADJUSTMENTS
   ============================================================ */

/* Opportunity Card */
@media (max-width: 479px) {
  .opportunity-card-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .opportunity-card-stat-value {
    font-size: var(--text-base);
  }
}

/* Business Card */
@media (max-width: 479px) {
  .business-card {
    padding: var(--space-4);
  }
}

/* Tourism Card */
@media (max-width: 639px) {
  .tourism-card {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 479px) {
  .tourism-card {
    aspect-ratio: 16 / 9;
  }
}

/* LGA Card */
@media (max-width: 479px) {
  .lga-card-image,
  .lga-card-image-placeholder {
    height: 130px;
  }
}

/* ============================================================
   8. CTA BANNER RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--space-10) var(--space-8);
  }

  .cta-banner-actions {
    justify-content: center;
  }

  .cta-banner-subtitle {
    max-width: 100%;
  }
}

@media (max-width: 639px) {
  .cta-banner {
    padding: var(--space-8) var(--space-6);
  }

  .cta-banner-title {
    font-size: var(--text-2xl);
  }

  .cta-banner-actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-banner-actions .btn {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .cta-banner {
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-5);
  }
}

/* ============================================================
   9. STATS SECTION RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .stats-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .stats-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .stat-value {
    font-size: var(--text-3xl);
  }

  .stat-card {
    padding: var(--space-4);
  }
}

/* ============================================================
   10. SEARCH BAR RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .search-bar-btn {
    display: none;
  }

  .search-bar-input {
    padding-right: 1rem;
  }
}

/* ============================================================
   11. TABS RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .tabs-nav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 479px) {
  .tabs-nav-btn {
    padding: 0.5rem 0.875rem;
    font-size: var(--text-xs);
  }
}

/* ============================================================
   12. MODAL RESPONSIVE
   ============================================================ */
@media (max-width: 639px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    padding: var(--space-6);
    max-height: 90vh;
  }
}

/* ============================================================
   13. TOAST RESPONSIVE
   ============================================================ */
@media (max-width: 479px) {
  .toast-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }

  .toast {
    min-width: unset;
    max-width: 100%;
    transform: translateY(120%);
  }

  .toast.show {
    transform: translateY(0);
  }
}

/* ============================================================
   14. BACK TO TOP RESPONSIVE
   ============================================================ */
@media (max-width: 479px) {
  .back-to-top {
    bottom: var(--space-5);
    right: var(--space-4);
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   15. TICKER BAR RESPONSIVE
   ============================================================ */
@media (max-width: 639px) {
  .ticker-label {
    display: none;
  }

  .ticker-content {
    padding-left: var(--space-4);
  }
}

/* ============================================================
   16. PARTNER STRIP RESPONSIVE
   ============================================================ */
@media (max-width: 639px) {
  .partner-strip {
    gap: var(--space-6);
  }

  .partner-logo {
    max-height: 28px;
  }
}

/* ============================================================
   17. PWA INSTALL BANNER RESPONSIVE
   ============================================================ */
@media (max-width: 479px) {
  .pwa-install-banner {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    flex-wrap: wrap;
  }

  .pwa-install-actions {
    flex-direction: row;
    width: 100%;
  }

  .pwa-install-actions .btn {
    flex: 1;
  }
}

/* ============================================================
   18. COOKIE BANNER RESPONSIVE
   ============================================================ */
@media (max-width: 639px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-actions .btn {
    flex: 1;
  }
}

/* ============================================================
   19. PAGINATION RESPONSIVE
   ============================================================ */
@media (max-width: 479px) {
  .pagination-btn {
    width: 36px;
    height: 36px;
    font-size: var(--text-xs);
  }

  .pagination {
    gap: var(--space-1);
  }
}

/* ============================================================
   20. FILTER CHIPS RESPONSIVE
   ============================================================ */
@media (max-width: 639px) {
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex-shrink: 0;
  }
}

/* ============================================================
   21. ATLAS / MAP RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .atlas-layout {
    grid-template-columns: 1fr;
  }

  .atlas-sidebar {
    order: 2;
  }

  .atlas-map-container {
    height: 60vh;
    min-height: 400px;
  }
}

@media (max-width: 767px) {
  .atlas-map-container {
    height: 50vh;
    min-height: 320px;
  }

  .atlas-controls {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (max-width: 479px) {
  .atlas-map-container {
    height: 45vh;
    min-height: 280px;
  }
}

/* ============================================================
   22. DASHBOARD RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    position: static;
    width: 100%;
  }

  .dashboard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (max-width: 479px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   23. TABLE RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .table-wrap {
    border-radius: var(--radius-lg);
  }

  thead th,
  tbody td {
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 639px) {
  .table-responsive-stack thead {
    display: none;
  }

  .table-responsive-stack tbody tr {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-glass);
    padding: var(--space-4);
    gap: var(--space-2);
  }

  .table-responsive-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: none;
    font-size: var(--text-sm);
  }

  .table-responsive-stack tbody td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
  }
}

/* ============================================================
   24. FORM RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   25. INVESTMENT PAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .investment-layout {
    grid-template-columns: 1fr;
  }

  .investment-filter-sidebar {
    display: none;
  }

  .investment-filter-sidebar.mobile-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--bg-card);
    overflow-y: auto;
    padding: var(--space-6);
    animation: slideInLeft 0.3s ease forwards;
  }

  .investment-mobile-filter-btn {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .investment-mobile-filter-btn {
    display: none;
  }
}

/* ============================================================
   26. EXPORT CATALOGUE RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .export-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .export-card-specs {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   27. BUSINESS PROFILE PAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .business-profile-layout {
    grid-template-columns: 1fr;
  }

  .business-profile-sidebar {
    order: -1;
  }
}

@media (max-width: 767px) {
  .business-profile-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .business-profile-logo {
    width: 80px;
    height: 80px;
  }
}

/* ============================================================
   28. LGA PAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .lga-page-layout {
    grid-template-columns: 1fr;
  }

  .lga-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .lga-overview-grid {
    grid-template-columns: 1fr;
  }

  .lga-page-hero {
    height: 50vw;
    min-height: 200px;
    max-height: 300px;
  }
}

/* ============================================================
   29. TOURISM PAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .tourism-featured-grid {
    grid-template-columns: 1fr;
  }

  .tourism-featured-main {
    height: 400px;
  }
}

@media (max-width: 767px) {
  .tourism-featured-main {
    height: 300px;
  }

  .tourism-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .tourism-gallery-grid {
    grid-template-columns: 1fr;
  }

  .tourism-featured-main {
    height: 250px;
  }
}

/* ============================================================
   30. TRADE FAIR RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .trade-fair-booths-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .trade-fair-booths-grid {
    grid-template-columns: 1fr;
  }

  .trade-fair-hall-nav {
    flex-wrap: wrap;
  }
}

/* ============================================================
   31. AI ASSISTANT RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .ai-assistant-panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    border-radius: 0;
    max-height: 100vh;
  }

  .ai-chat-messages {
    max-height: calc(100vh - 200px);
  }
}

@media (max-width: 479px) {
  .ai-fab {
    bottom: var(--space-5);
    right: var(--space-4);
    width: 52px;
    height: 52px;
  }
}

/* ============================================================
   32. HERO STATS ROW RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .hero-stats-row {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 767px) {
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (max-width: 479px) {
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .hero-stats-row .stat-value {
    font-size: var(--text-2xl);
  }
}

/* ============================================================
   33. MARQUEE TICKER RESPONSIVE
   ============================================================ */
@media (max-width: 639px) {
  .marquee-wrap::before,
  .marquee-wrap::after {
    width: 40px;
  }
}

/* ============================================================
   34. TESTIMONIALS RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   35. SUCCESS STORIES RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .success-stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .success-stories-grid {
    grid-template-columns: 1fr;
  }

  .success-card-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   36. VIRTUAL TRADE FAIR HALL RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .virtual-hall {
    padding: var(--space-8);
  }

  .virtual-hall-booths {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .virtual-hall {
    padding: var(--space-5);
  }

  .virtual-hall-booths {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .virtual-hall-booths {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   37. ADMIN PANEL RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: var(--z-modal);
    transition: left 0.3s ease;
    overflow-y: auto;
  }

  .admin-sidebar.open {
    left: 0;
  }

  .admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-modal) - 1);
    display: none;
  }

  .admin-sidebar-overlay.show {
    display: block;
  }
}

/* ============================================================
   38. RESPONSIVE VISIBILITY UTILITIES
   ============================================================ */

/* Hide on mobile */
@media (max-width: 639px) {
  .hide-mobile { display: none !important; }
}

/* Hide on tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* Show only on mobile */
@media (min-width: 640px) {
  .show-mobile-only { display: none !important; }
}

/* Show only on tablet */
@media (max-width: 639px),
       (min-width: 1024px) {
  .show-tablet-only { display: none !important; }
}

/* Show only on desktop */
@media (max-width: 1023px) {
  .show-desktop-only { display: none !important; }
}

/* ============================================================
   39. RESPONSIVE TEXT ALIGNMENT
   ============================================================ */
@media (max-width: 767px) {
  .md-text-center { text-align: center; }
  .md-text-left { text-align: left; }
}

@media (max-width: 639px) {
  .sm-text-center { text-align: center; }
  .sm-text-left { text-align: left; }
}

/* ============================================================
   40. RESPONSIVE FLEX DIRECTION
   ============================================================ */
@media (max-width: 767px) {
  .md-flex-col { flex-direction: column; }
  .md-items-center { align-items: center; }
  .md-justify-center { justify-content: center; }
}

@media (max-width: 639px) {
  .sm-flex-col { flex-direction: column; }
  .sm-items-center { align-items: center; }
  .sm-w-full { width: 100%; }
}

/* ============================================================
   41. TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets for touch */
  .btn {
    min-height: 44px;
  }

  .btn-sm {
    min-height: 36px;
  }

  .navbar-nav-link {
    min-height: 44px;
  }

  .filter-chip {
    min-height: 40px;
  }

  .pagination-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove hover effects that don't work on touch */
  .hover-lift:hover,
  .hover-scale:hover,
  .hover-lift-sm:hover {
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  .opportunity-card:hover,
  .business-card:hover,
  .export-card:hover,
  .lga-card:hover,
  .tourism-card:hover {
    transform: none;
  }
}

/* ============================================================
   42. LARGE SCREEN OPTIMIZATIONS
   ============================================================ */
@media (min-width: 1440px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .hero-section {
    min-height: 100vh;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: var(--container-max);
  }
}

/* ============================================================
   43. PRINT MEDIA
   ============================================================ */
@media print {
  .navbar,
  .footer,
  .back-to-top,
  .cookie-banner,
  .pwa-install-banner,
  .ai-fab,
  .ticker-bar,
  .navbar-hamburger,
  .mobile-nav {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .card,
  .opportunity-card,
  .business-card,
  .export-card {
    border: 1px solid #ddd;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10pt;
    color: #666;
  }

  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  .section {
    padding: 20pt 0;
  }
}

/* ============================================================
   44. HIGH CONTRAST MODE
   ============================================================ */
@media (forced-colors: active) {
  .btn-primary {
    background: ButtonText;
    color: ButtonFace;
    border: 2px solid ButtonText;
  }

  .card,
  .opportunity-card,
  .business-card {
    border: 2px solid ButtonText;
  }

  .badge {
    border: 1px solid ButtonText;
  }
}

/* ============================================================
   45. LANDSCAPE PHONE OPTIMIZATIONS
   ============================================================ */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
    padding: calc(var(--nav-height) + var(--space-8)) 0 var(--space-10);
  }

  .hero-governor-image {
    max-height: 260px;
  }

  .modal-overlay {
    align-items: center;
  }

  .modal {
    max-height: 80vh;
  }

  .mobile-nav {
    padding: var(--space-4);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .mobile-nav-actions {
    grid-column: 1 / -1;
  }
}