/* ============================================================
   THE ISLAND PERSPECTIVE — Responsive Stylesheet
   File: css/responsive.css

   Breakpoint System:
   ─────────────────────────────────────────────────────────
   --xs   : 320px–479px   (Small mobile)
   --sm   : 480px–767px   (Large mobile)
   --md   : 768px–1023px  (Tablet portrait)
   --lg   : 1024px–1279px (Tablet landscape / small laptop)
   --xl   : 1280px–1439px (Desktop)
   --2xl  : 1440px–1919px (Wide desktop / LCD)
   --3xl  : 1920px–2559px (Full HD / large TV)
   --4k   : 2560px+       (4K / Ultra-wide TV)
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1. FLUID CONTAINER — scales smoothly across all widths
   ══════════════════════════════════════════════════════════════ */

:root {
  --container-max: 1240px;
  --gutter: 24px;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

/* Wide desktop: breathe more */
@media (min-width: 1440px) {
  :root { --container-max: 1340px; --gutter: 32px; }
}

/* Full HD / TV: generous margins */
@media (min-width: 1920px) {
  :root { --container-max: 1560px; --gutter: 48px; }
  body { font-size: 17px; }
}

/* 4K / Ultra-wide */
@media (min-width: 2560px) {
  :root { --container-max: 2000px; --gutter: 80px; }
  body { font-size: 19px; }
}


/* ══════════════════════════════════════════════════════════════
   2. LARGE / WIDE DESKTOP (1280px – 1439px)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid  { grid-template-columns: 1.4fr 1fr 1.4fr 1fr; }
  .content-grid { grid-template-columns: 1fr 300px; }

  .featured-headline { font-size: 2.5rem; }

  .sidebar-col { display: block; }
  .sidebar-sticky { position: sticky; top: 70px; }
}


/* ══════════════════════════════════════════════════════════════
   3. FULL HD / TV (1920px+)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1920px) {

  /* Nav */
  .site-nav .container { padding: 0 var(--gutter); }
  .nav-list__link { padding: 18px 20px; font-size: 13px; }

  /* Header */
  .site-logo__name    { font-size: 1.75rem; }
  .site-logo__tagline { font-size: 12px; }

  /* Hero sections */
  .featured-headline  { font-size: 3rem; }

  /* Cards */
  .card__headline     { font-size: 1.35rem; }
  .card-grid          { gap: 40px; }
  .card-grid--4       { grid-template-columns: repeat(4, 1fr); }

  /* Category */
  .cat-article-item__headline { font-size: 16px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.4fr 1fr; gap: 60px; }
  .footer-col ul li a { font-size: 15px; }
  .footer-col__mission { font-size: 14.5px; }

  /* Ads — full size */
  .ad--leaderboard { height: 90px; }
  .ad--billboard   { height: 90px; }
  .sidebar-sticky  { top: 80px; }

  /* Section padding */
  .section { padding: 64px 0; }
  .community-cta { padding: 96px 0; }
  .newsletter    { padding: 80px 0; }

  /* Typography scale */
  .community-cta__headline  { font-size: 2.75rem; }
  .newsletter__headline     { font-size: 2.25rem; }
  .section-header__title    { font-size: 13px; letter-spacing: 2px; }
}


/* ══════════════════════════════════════════════════════════════
   4. 4K / ULTRA-WIDE (2560px+)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 2560px) {
  .featured-headline  { font-size: 3.5rem; }
  .card__headline     { font-size: 1.5rem; }
  .card-grid          { gap: 52px; }
  .nav-list__link     { padding: 20px 24px; font-size: 14px; }
  .site-logo__name    { font-size: 2rem; }
  .section            { padding: 80px 0; }
  .community-cta      { padding: 120px 0; }
  .community-cta__headline { font-size: 3.25rem; }
  .footer-grid { gap: 80px; }
  .footer-col ul li a { font-size: 16px; }
  .footer-col__mission { font-size: 16px; }
}


/* ══════════════════════════════════════════════════════════════
   5. TABLET LANDSCAPE (1024px – 1279px)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --gutter: 20px; }

  .content-grid       { grid-template-columns: 1fr 260px; gap: 24px; }
  .card-grid--4       { grid-template-columns: repeat(3, 1fr); }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 32px; }
  .featured-headline  { font-size: 2rem; }
  .sidebar-col        { display: block; }
  .sidebar-sticky     { top: 68px; }
  .ad--halfpage       { height: 500px; }
}


/* ══════════════════════════════════════════════════════════════
   6. TABLET PORTRAIT (768px – 1023px)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --gutter: 20px; }

  /* Layout */
  .content-grid { grid-template-columns: 1fr; }
  .sidebar-col  { display: none; }

  /* Nav */
  .nav-list    { display: none; }
  .nav-hamburger { display: flex; }

  /* Cards */
  .card-grid       { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .card-grid--4    { grid-template-columns: repeat(2, 1fr); }

  /* Featured */
  .featured-headline { font-size: 1.75rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Typography */
  .community-cta__headline { font-size: 1.75rem; }
  .newsletter__headline    { font-size: 1.5rem; }

  /* Utility bar */
  .utility-bar__left  { display: none; }

  /* Ads */
  .ad--leaderboard { height: 90px; }
  .ad--halfpage    { display: none; } /* too tall for tablet portrait */
}


/* ══════════════════════════════════════════════════════════════
   7. LARGE MOBILE (480px – 767px)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 480px) and (max-width: 767px) {
  :root { --gutter: 16px; }

  /* Layout */
  .content-grid { grid-template-columns: 1fr; }
  .sidebar-col  { display: none; }

  /* Nav */
  .nav-list      { display: none; }
  .nav-hamburger { display: flex; }
  .utility-bar__left { display: none; }

  /* Cards */
  .card-grid, .card-grid--4 { grid-template-columns: 1fr; gap: 16px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Featured */
  .featured-headline { font-size: 1.5rem; }

  /* Typography */
  .community-cta__headline { font-size: 1.5rem; }
  .newsletter__headline    { font-size: 1.35rem; }
  .newsletter__form        { flex-direction: column; }
  .newsletter__input       { width: 100%; }

  /* Ads */
  .ad--leaderboard { height: 50px; }
  .ad--billboard   { height: 50px; }
  .ad--halfpage    { display: none; }
  .ad--medium-rect { height: 200px; }
  .mid-ad-wrap     { overflow: hidden; }
  .mid-ad-wrap img { height: 50px !important; }
}


/* ══════════════════════════════════════════════════════════════
   8. SMALL MOBILE (320px – 479px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  :root { --gutter: 14px; }

  /* Layout — single column everything */
  .content-grid { grid-template-columns: 1fr; }
  .sidebar-col  { display: none; }

  /* Nav */
  .nav-list       { display: none; }
  .nav-hamburger  { display: flex; }
  .utility-bar    { display: none; } /* Save space on tiny screens */

  /* Header */
  .site-logo__name    { font-size: 1.1rem; }
  .site-logo__tagline { display: none; }
  .site-logo__icon    { width: 32px; height: 32px; }
  .site-header        { padding: 10px 0; }

  /* Cards */
  .card-grid, .card-grid--4 { grid-template-columns: 1fr; gap: 14px; }
  .card__headline { font-size: 1.05rem; }

  /* Featured */
  .featured-headline  { font-size: 1.35rem; }
  .featured-summary   { font-size: 0.9rem; }

  /* Category items */
  .cat-article-item__thumb { width: 72px; height: 56px; }
  .cat-article-item__headline { font-size: 13.5px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-logo__name { font-size: 0.95rem; }

  /* Typography */
  .community-cta__headline { font-size: 1.35rem; }
  .community-cta__text     { font-size: 0.9rem; }
  .newsletter__headline    { font-size: 1.2rem; }
  .newsletter__form        { flex-direction: column; }
  .newsletter__input       { width: 100%; }

  /* Section headings */
  .section-header__title { font-size: 10px; }

  /* Ads — hide tall ones, squish banners */
  .ad--leaderboard { height: 50px; }
  .ad--billboard   { display: none; }
  .ad--halfpage    { display: none; }
  .ad--medium-rect { height: 180px; }
  .mid-ad-wrap img { height: 50px !important; }

  /* Mobile nav panel */
  .nav-mobile-panel a { font-size: 1rem; padding: 14px 0; }

  /* Buttons */
  .btn { padding: 9px 16px; font-size: 11px; }
}


/* ══════════════════════════════════════════════════════════════
   9. PRINT MEDIA
   ══════════════════════════════════════════════════════════════ */

@media print {
  .utility-bar,
  .site-nav,
  .header-actions,
  .nav-hamburger,
  .nav-mobile-panel,
  .ad-container,
  .mid-ad-wrap,
  .newsletter,
  .community-cta,
  .sidebar-col,
  .site-footer { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  .container { max-width: 100%; padding: 0 16px; }
  .card { border: 1px solid #ccc; break-inside: avoid; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  a { color: #000; text-decoration: underline; }
}


/* ══════════════════════════════════════════════════════════════
   10. HIGH-DPI / RETINA DISPLAYS
   ══════════════════════════════════════════════════════════════ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp borders and icons on retina */
  .site-nav { border-top-width: 2px; }
  .section-header { border-bottom-width: 1.5px; }
}


/* ══════════════════════════════════════════════════════════════
   11. LANDSCAPE MOBILE (phones rotated)
   ══════════════════════════════════════════════════════════════ */

@media (max-height: 480px) and (orientation: landscape) {
  .utility-bar  { display: none; }
  .site-header  { padding: 6px 0; }
  .nav-list__link { padding: 10px 12px; }
  .featured-image-wrap { aspect-ratio: 21/9; }

  .nav-mobile-panel {
    padding-top: 60px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}


/* ══════════════════════════════════════════════════════════════
   12. ACCESSIBILITY — reduced motion
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   13. TOUCH DEVICE IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .nav-list__link  { padding: 16px 14px; }
  .nav-hamburger   { width: 44px; height: 44px; }
  .btn             { padding: 14px 24px; min-height: 44px; }
  .footer-col ul li a { padding: 4px 0; display: inline-block; }

  /* Remove hover effects that don't work on touch */
  .card:hover { transform: none; }
  .card:hover .card__image-wrap img { transform: none; }
  .featured-image-wrap:hover img    { transform: none; }

  /* Faster touch response */
  a, button { touch-action: manipulation; }
}