/* ==========================================================================
   YPJ Portal — Responsive Styles (responsive.css)
   Breakpoints: 1024px · 768px · 480px
   ========================================================================== */


/* ==========================================================================
   Tablet Landscape (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

  /* --- Typography --- */
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }

  /* --- Grid Adjustments --- */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Quick Links: 4 → 2 columns */
  .ql-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

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

  /* --- Stats Row: 4 → 2 columns --- */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--space-8) var(--space-4);
  }

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

  .stat-number {
    font-size: var(--fs-3xl);
  }

  /* Reset the vertical divider for 2-col layout */
  .stat-card + .stat-card::before {
    display: none;
  }

  /* Vertical divider only between columns (1st & 2nd, 3rd & 4th) */
  .stat-card:nth-child(even)::before {
    display: block;
  }

  /* --- Footer: 4 → 2 columns --- */
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .footer-brand {
    max-width: none;
  }

  /* --- Section Padding --- */
  .section {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }

  .section-header {
    margin-bottom: var(--space-12);
  }

  /* --- Hero --- */
  .hero-title {
    max-width: 600px;
  }

  .hero-subtitle {
    max-width: 500px;
  }

  /* --- Page Banner --- */
  .page-banner {
    min-height: 260px;
  }

  .page-banner-title {
    font-size: var(--fs-3xl);
  }

  /* --- Top Bar: hide some items for space --- */
  .top-bar-left > *:nth-child(n+3) {
    display: none;
  }

  /* --- Card Horizontal --- */
  .card-horizontal .card-image {
    width: 220px;
  }

  /* --- Quick Links --- */
  .quick-link {
    min-height: 180px;
  }
}


/* ==========================================================================
   Tablet Portrait (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Root overrides --- */
  :root {
    --container-padding: 1.25rem;
    --header-height: 68px;
  }

  /* --- Typography --- */
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
  h4 { font-size: var(--fs-md); }

  .lead {
    font-size: var(--fs-base);
  }

  /* --- Navigation: show mobile toggle, hide desktop nav --- */
  .nav {
    display: none;
  }

  .nav-cta.desktop-only {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  /* --- Grid: all 2-col grids → 1 column --- */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Quick Links: 2 → 1 column on mobile */
  .ql-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .ql-card-img {
    aspect-ratio: 16 / 9;
  }

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

  /* --- Grid gap reduction --- */
  .grid {
    gap: var(--space-6);
  }

  /* --- Hero --- */
  .hero {
    min-height: 75vh;
  }

  .hero-slide {
    align-items: center;
  }

  .hero-content {
    padding-bottom: 7rem;   /* enough clearance above wave */
    padding-top: calc(var(--header-height) + var(--space-8));
  }

  /* Wave cut — smaller on mobile, less gap */
  .hero-wave-cut svg {
    height: 80px;
  }

  .hero-dots {
    bottom: 3rem;
  }

  /* Quick links section — reduce top padding */
  .ql-section {
    padding-top: var(--space-6);
  }

  .hero-title {
    font-size: clamp(2rem, 6vw, 3rem);
    max-width: none;
  }

  .hero-subtitle {
    font-size: var(--fs-md);
    max-width: none;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    justify-content: center;
  }

  .hero-scroll {
    display: none;
  }

  /* --- Section --- */
  .section {
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  .section-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  .section-desc {
    font-size: var(--fs-base);
  }

  /* --- Stats Row: stays 2 cols, smaller --- */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-2);
  }

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

  .stat-number {
    font-size: var(--fs-2xl);
  }

  .stat-label {
    font-size: var(--fs-xs);
  }

  /* --- Footer: 2 columns --- */
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

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

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .footer-bottom-links {
    justify-content: center;
  }

  .footer-agencies {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* --- Card Horizontal → Vertical --- */
  .card-horizontal {
    flex-direction: column;
  }

  .card-horizontal .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* --- Card Featured --- */
  .card-featured .card-body {
    padding: var(--space-6);
  }

  .card-featured .card-title {
    font-size: var(--fs-xl);
  }

  /* --- Card body padding reduction --- */
  .card-body {
    padding: var(--space-6);
  }

  /* --- Quick Links --- */
  .quick-link {
    min-height: 160px;
    padding: var(--space-6);
  }

  /* --- Page Banner --- */
  .page-banner {
    min-height: 220px;
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: var(--space-8);
  }

  .page-banner-title {
    font-size: var(--fs-2xl);
  }

  .breadcrumb {
    font-size: var(--fs-xs);
    flex-wrap: wrap;
    justify-content: center;
  }

  /* --- Top Bar --- */
  .top-bar {
    display: none;
  }

  .header {
    top: 0;
  }

  /* --- Accordion --- */
  .accordion-trigger {
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-sm);
  }

  .accordion-content-inner {
    padding: 0 var(--space-6) var(--space-4);
  }

  /* --- App Card --- */
  .app-card {
    padding: var(--space-4);
  }

  .app-icon {
    width: 48px;
    height: 48px;
  }

  .app-title {
    font-size: var(--fs-base);
  }

  /* --- Feature Items --- */
  .feature-icon {
    width: 52px;
    height: 52px;
  }

  .feature-icon img,
  .feature-icon svg {
    width: 26px;
    height: 26px;
  }

  /* --- Buttons --- */
  .btn {
    padding: 0.75rem 1.75rem;
  }

  .btn-lg {
    padding: 0.9rem 2.25rem;
    font-size: var(--fs-sm);
  }

  /* --- Scroll to Top --- */
  .scroll-top {
    width: 42px;
    height: 42px;
    bottom: 1.5rem;
    right: 1.5rem;
  }
}


/* ==========================================================================
   Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {

  /* --- Root overrides --- */
  :root {
    --container-padding: 1rem;
    --header-height: 60px;
  }

  /* --- Typography — even smaller --- */
  h1 { font-size: 1.75rem; }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
  h4 { font-size: var(--fs-md); }
  h5, h6 { font-size: var(--fs-base); }

  .lead {
    font-size: var(--fs-sm);
  }

  /* --- Everything single column --- */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-6 {
    grid-template-columns: 1fr;
  }

  .grid {
    gap: var(--space-4);
  }

  /* --- Hero --- */
  .hero {
    min-height: 68vh;
  }

  .hero-content {
    padding-bottom: 6rem;   /* clearance above wave */
  }

  /* Wave even smaller on small phones */
  .hero-wave-cut svg {
    height: 65px;
  }

  .hero-dots {
    bottom: 2.5rem;
  }

  .ql-section {
    padding-top: var(--space-4);
  }

  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .hero-subtitle {
    font-size: var(--fs-base);
    margin-bottom: var(--space-6);
  }

  .hero-badge {
    font-size: var(--fs-xs);
    padding: 0.35rem 1rem;
  }

  .hero-dots {
    bottom: 1.25rem;
  }

  /* --- Sections --- */
  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  .section-title {
    font-size: 1.375rem;
  }

  .section-desc {
    font-size: var(--fs-sm);
  }

  .section-label {
    font-size: var(--fs-xs);
  }

  /* --- Full-width buttons on mobile --- */
  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.5rem;
  }

  .btn-sm {
    width: auto; /* Keep small buttons inline */
  }

  .btn-icon {
    width: 42px;
    height: 42px;
  }

  /* --- Cards --- */
  .card {
    border-radius: var(--radius-lg);
  }

  .card-body {
    padding: var(--space-5);
  }

  .card-footer {
    padding: var(--space-3) var(--space-5);
  }

  .card-title {
    font-size: var(--fs-base);
  }

  .card-featured .card-body {
    padding: var(--space-5);
  }

  .card-featured .card-title {
    font-size: var(--fs-lg);
  }

  .card-featured .card-image {
    aspect-ratio: 16 / 9;
  }

  /* --- Stats --- */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-1);
  }

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

  .stat-number {
    font-size: var(--fs-xl);
  }

  .stat-label {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
  }

  .stat-unit {
    font-size: var(--fs-base);
  }

  /* --- Footer: single column --- */
  .footer {
    padding-top: 3rem;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: auto;
    text-align: center;
  }

  .footer-brand .logo {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-heading {
    margin-bottom: var(--space-4);
    text-align: center;
  }

  .footer-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-links {
    text-align: center;
  }

  .footer-bottom {
    text-align: center;
    padding: var(--space-4) 0;
  }

  .footer-bottom-links {
    flex-direction: column;
    gap: var(--space-2);
  }

  .footer-disclaimer {
    font-size: 0.65rem;
    text-align: center;
  }

  .footer-agencies {
    justify-content: center;
  }

  .footer-agencies img {
    height: 24px;
  }

  /* --- Page Banner --- */
  .page-banner {
    min-height: 180px;
    padding-top: calc(var(--header-height) + var(--space-6));
    padding-bottom: var(--space-6);
  }

  .page-banner-title {
    font-size: var(--fs-xl);
  }

  .page-banner-desc {
    font-size: var(--fs-sm);
  }

  /* --- Quick Links --- */
  .quick-link {
    min-height: 140px;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .quick-link-title {
    font-size: var(--fs-base);
  }

  .quick-link-desc {
    font-size: var(--fs-xs);
  }

  .quick-link-arrow {
    width: 32px;
    height: 32px;
    bottom: var(--space-4);
    right: var(--space-4);
  }

  /* --- App Card --- */
  .app-card {
    padding: var(--space-4);
    gap: var(--space-3);
    border-radius: var(--radius-md);
  }

  .app-icon {
    width: 44px;
    height: 44px;
  }

  .app-icon svg,
  .app-icon img {
    width: 22px;
    height: 22px;
  }

  .app-title {
    font-size: var(--fs-sm);
  }

  .app-desc {
    font-size: var(--fs-xs);
  }

  /* --- Accordion --- */
  .accordion-trigger {
    padding: var(--space-4);
    font-size: var(--fs-sm);
  }

  .accordion-content-inner {
    padding: 0 var(--space-4) var(--space-4);
    font-size: var(--fs-xs);
  }

  /* --- Feature Items --- */
  .feature-item {
    gap: var(--space-3);
  }

  .feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
  }

  .feature-icon img,
  .feature-icon svg {
    width: 22px;
    height: 22px;
  }

  .feature-title {
    font-size: var(--fs-base);
  }

  .feature-text {
    font-size: var(--fs-xs);
  }

  .feature-card {
    padding: var(--space-5);
  }

  /* --- Badges --- */
  .badge {
    padding: 0.25rem 0.75rem;
    font-size: 0.65rem;
  }

  /* --- Tags --- */
  .tag {
    font-size: 0.65rem;
    padding: var(--space-1) var(--space-2);
  }

  /* --- Divider --- */
  .divider {
    margin: var(--space-6) 0;
  }

  /* --- Scroll to Top (smaller on mobile) --- */
  .scroll-top {
    width: 38px;
    height: 38px;
    bottom: 1rem;
    right: 1rem;
  }

  .scroll-top svg {
    width: 16px;
    height: 16px;
  }

  /* --- Mobile Menu --- */
  .mobile-menu {
    padding-top: calc(var(--header-height) + var(--space-4));
  }

  .mobile-menu .nav-link {
    font-size: var(--fs-base);
    padding: var(--space-3) 0;
  }
}


/* ==========================================================================
   Ultra-small devices (max-width: 360px)
   ========================================================================== */

@media (max-width: 360px) {
  :root {
    --container-padding: 0.75rem;
  }

  .hero {
    min-height: 55vh;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .hero-subtitle {
    font-size: var(--fs-sm);
  }

  .section-title {
    font-size: var(--fs-lg);
  }

  .stat-number {
    font-size: var(--fs-lg);
  }

  .stat-label {
    font-size: 0.6rem;
  }

  .page-banner-title {
    font-size: var(--fs-lg);
  }
}


/* ==========================================================================
   Large Screens (min-width: 1440px)
   ========================================================================== */

@media (min-width: 1440px) {
  :root {
    --container-padding: 2rem;
  }

  .hero-title {
    max-width: 800px;
  }

  .hero-subtitle {
    max-width: 650px;
    font-size: 1.35rem;
  }
}


/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .header,
  .top-bar,
  .footer,
  .scroll-top,
  .mobile-toggle,
  .mobile-menu,
  .hero-dots,
  .hero-scroll,
  .btn,
  .nav-cta {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }

  .hero {
    min-height: auto;
    page-break-after: avoid;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .section {
    padding: 1.5rem 0;
  }
}