/* ============================================================
   SPIRILIGIOUS · mobile.css  (v2 — refined)
   ------------------------------------------------------------
   Load order requirement:
     style.css  →  editorial.css  →  inline <style>  →  mobile.css
   Every rule below sits inside a max-width media query, so the
   desktop layout (≥1025px) is unchanged.
   ============================================================ */


/* ============================================================
   0 · BASE RESET for the hero scroll cue (now a <button>)
   ============================================================ */
.scroll-indicator {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.scroll-indicator:focus-visible {
  outline: 2px solid var(--gold, #b8942c);
  outline-offset: 8px;
  border-radius: 10px;
}


/* ============================================================
   1 · GLOBAL SAFETY · ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    background-attachment: scroll;   /* `fixed` stutters on phones */
    -webkit-text-size-adjust: 100%;
  }
  img, svg, video, canvas, iframe { max-width: 100%; }

  /* Long words, URLs and Devanagari headings must never widen the page */
  h1, h2, h3, h4, h5, h6,
  p, li, a, span, blockquote,
  .card-title, .card-desc,
  .featured-desc, .detail-body-text,
  .discussion-item h4, .discussion-item p {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Allow grid/flex children to shrink below content width */
  .unified-grid > *,
  .featured-card > *,
  .coming-grid > *,
  .manthan-grid > *,
  .dock-item,
  .dock-item .dock-label,
  .home-archives-grid > * {
    min-width: 0;
  }
}


/* ============================================================
   2 · LATEST ARTICLES GRID (homepage) · ≤ 900px / ≤ 560px
   Base rules live in editorial.css; we only make it responsive.
   ============================================================ */
@media (max-width: 900px) {
  .home-archives-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 1.25rem !important;
    width: 100%;
  }
  .home-archives-grid > * { width: 100%; }
}
@media (max-width: 560px) {
  .home-archives-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}


/* ============================================================
   3 · HEADER + MOBILE DRAWER · ≤ 820px
   ============================================================ */
@media (max-width: 820px) {
  body { padding-top: 58px; }

  /* --- floating pill header, compact & proportionate --- */
  .premium-header {
    top: 8px;
    width: calc(100% - 16px);
    border-radius: 44px;
    padding: 0.28rem 0.95rem;
    box-shadow: 0 4px 22px rgba(43, 36, 28, 0.06);
  }
  .premium-header.scrolled { top: 6px; }
  .premium-header::after { left: 18%; right: 18%; }

  .logo-link { gap: 0.5rem; }
  .logo-image { height: 28px; }
  .logo-text-inline { font-size: 0.98rem; }

  /* --- hamburger: real 44px touch target, pills centred --- */
  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
    gap: 4px;
  }
  .mobile-menu-btn .pill { width: 20px; height: 2px; }
  .mobile-menu-btn.active .pill:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-btn.active .pill:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* --- drawer --- */
  .mobile-drawer {
    width: 320px;
    max-width: 86vw;
    padding: 1.8rem 1.4rem 1.5rem;
    border-radius: 0;
  }
  .drawer-header { margin-bottom: 1.2rem; }
  .drawer-logo { height: 28px; }
  .drawer-logo-text { font-size: 1.05rem; }
  .drawer-tagline { font-size: 0.72rem; }
  .drawer-close {
    width: 44px;
    height: 44px;
    top: -6px;
    right: -6px;
  }
  .drawer-link {
    font-size: 0.98rem;
    padding: 0.8rem 0.75rem;
    min-height: 48px;
  }
  .drawer-link i { width: 22px; font-size: 0.95rem; }
}


/* ============================================================
   4 · HERO  ·  REFINED for narrow screens
   ------------------------------------------------------------
   Goals:
     • shorter overall (52svh instead of 56–80vh)
     • text block sits above the scroll cue with a clear gap
     • image crop favours the central deity / motif
     • quieter decorative blend so the headline dominates
   ============================================================ */
@media (max-width: 820px) {
  .hero {
    width: calc(100% - 20px);
    margin-top: 0.35rem;
    min-height: 320px;
    min-height: max(320px, 52vh);
    min-height: max(320px, 52svh);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 44px rgba(43, 36, 28, 0.08);
  }
  .hero::before {
    /* keep the deity / motif in-frame when the card is narrow */
    background-position: center 26%;
  }
  .hero-content {
    padding: 0.9rem 1.2rem 3.4rem;    /* room for the scroll cue */
    gap: 0.4rem;
    max-width: 100%;
  }
  .hero-eyebrow {
    font-size: clamp(0.78rem, 3.2vw, 0.95rem);
    letter-spacing: 0.05em;
    opacity: 0.92;
    margin: 0;
  }
  .hero-title {
    font-size: clamp(1.85rem, 8.5vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
  }
  .hero-subtitle {
    font-size: clamp(0.92rem, 3.8vw, 1.2rem);
    line-height: 1.35;
    letter-spacing: 0.025em;
    opacity: 0.96;
    margin: 0;
  }
  .hero-blend { height: 52px; }        /* quieter fade into the page */

  .scroll-indicator {
    bottom: 10px;
    gap: 3px;
    opacity: 0.55;
    letter-spacing: 2.5px;
  }
  .scroll-indicator .scroll-line { height: 18px; }
}

@media (max-width: 640px) {
  .hero {
    min-height: 300px;
    min-height: max(300px, 50vh);
    min-height: max(300px, 50svh);
  }
  .hero-content { padding: 0.85rem 1.05rem 3.2rem; }
  .hero-title { font-size: clamp(1.7rem, 9vw, 2.4rem); }
  .hero-blend { height: 46px; }

  /* the 34s zoom is wasted paint on a small screen */
  .hero::before { animation: none; }
}

@media (max-width: 480px) {
  .hero {
    width: calc(100% - 14px);
    min-height: 280px;
    min-height: max(280px, 48vh);
    min-height: max(280px, 48svh);
  }
  .hero-content { padding: 0.8rem 0.95rem 3rem; }
  .hero-title { font-size: clamp(1.6rem, 9.5vw, 2.1rem); }
  .hero-subtitle { font-size: clamp(0.85rem, 4vw, 1rem); }
  .hero-eyebrow { font-size: 0.76rem; }
  .hero-blend { height: 40px; }
  .scroll-indicator { bottom: 9px; }
  .scroll-indicator .scroll-line { height: 16px; }
}


/* ============================================================
   5 · EXPLORE DOCK  ·  MOBILE NAV BUTTONS
   ------------------------------------------------------------
   Each of the four destinations becomes its own tappable
   button-like surface:
     • soft warm ivory / cream fill
     • restrained gold hairline
     • moderate corner radius (14px / 12px)
     • 58–64px touch target (comfortably above 44px)
     • the entire <a> is the target — full-area clickability
     • subtle :active feedback on touch
     • hover + focus-visible states on capable devices

   The outer panel keeps its white background and gold border,
   but now sits visually *behind* the four buttons instead of
   reading as one oversized blank card.

   Desktop (≥ 821px) is untouched — every rule below sits
   inside a max-width media query.
   ============================================================ */
@media (max-width: 820px) {
  /* ---------- Panel: quiet container for four buttons ---------- */
  .explore-dock {
    /* 2-column grid → identical button widths, reliable wrapping */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;

    width: calc(100% - 24px);
    margin: -34px auto 0;
    padding: 0.55rem;

    /* Slightly translucent white so the four ivory buttons stand out */
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(184, 138, 58, 0.3);
    border-radius: 22px;
    box-shadow: 0 12px 36px rgba(43, 36, 28, 0.08);
  }

  /* Desktop vertical dividers are not needed in a wrapped grid */
  .dock-item::after { display: none; }

  /* ---------- Each destination = its own button ---------- */
  .dock-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;

    min-height: 62px;
    padding: 0.6rem 0.7rem;
    border-radius: 14px;

    /* Soft warm ivory surface */
    background: linear-gradient(180deg, #fdfaf2 0%, #faf4e6 100%);
    /* Restrained gold hairline */
    border: 1px solid rgba(184, 138, 58, 0.28);

    /* Very light lift so it reads as a surface, not a flat label */
    box-shadow:
      0 1px 2px rgba(43, 36, 28, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);

    color: #2b241c;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;

    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease,
      background 0.16s ease,
      border-color 0.16s ease;
  }

  /* ---------- Icon tile: rounded gold-tinted chip ---------- */
  .dock-item .dock-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(184, 138, 58, 0.07);
    transition: background 0.16s ease;
  }
  .dock-item .dock-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0.7) saturate(1) opacity(0.95);
    transition: filter 0.16s ease, transform 0.16s ease;
  }

  /* ---------- Label: dark, readable, wraps cleanly ---------- */
  .dock-item .dock-label {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .dock-item .dock-label .title {
    font-family: var(--font-sans, "Inter", sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: #2b241c;
    overflow-wrap: break-word;
  }
  .dock-item .dock-label .sub {
    font-size: 0.6rem;
    line-height: 1.15;
    font-weight: 400;
    color: #7a6f60;
    opacity: 0.85;
    overflow-wrap: break-word;
  }

  /* ---------- Hover (fine pointers only — never fires on touch) ---------- */
  @media (hover: hover) and (pointer: fine) {
    .dock-item:hover {
      transform: translateY(-1px);
      border-color: rgba(184, 138, 58, 0.55);
      background: linear-gradient(180deg, #fdfbf5 0%, #f8f0db 100%);
      box-shadow:
        0 4px 14px rgba(43, 36, 28, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .dock-item:hover .dock-icon {
      background: rgba(184, 138, 58, 0.14);
    }
    .dock-item:hover .dock-icon img {
      filter: brightness(0.55) saturate(1.1) opacity(1);
    }
  }

  /* ---------- Pressed feedback (touch) ---------- */
  .dock-item:active {
    transform: scale(0.975);
    background: rgba(184, 138, 58, 0.12);
    border-color: rgba(184, 138, 58, 0.6);
    box-shadow: inset 0 2px 4px rgba(43, 36, 28, 0.08);
    transition-duration: 0.06s;
  }
  .dock-item:active .dock-icon {
    background: rgba(184, 138, 58, 0.2);
  }

  /* ---------- Keyboard focus (visible ring) ---------- */
  .dock-item:focus-visible {
    outline: 2px solid var(--gold, #b8942c);
    outline-offset: 2px;
  }
}

/* ---------- Compact phones ≤ 480px ---------- */
@media (max-width: 480px) {
  .explore-dock {
    width: calc(100% - 16px);
    margin-top: -28px;
    padding: 0.45rem;
    gap: 0.45rem;
    border-radius: 18px;
  }
  .dock-item {
    min-height: 58px;
    padding: 0.55rem 0.55rem;
    gap: 0.5rem;
    border-radius: 12px;
  }
  .dock-item .dock-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .dock-item .dock-icon img {
    width: 22px;
    height: 22px;
  }
  .dock-item .dock-label .title { font-size: 0.74rem; }
  .dock-item .dock-label .sub   { font-size: 0.56rem; }
}

/* ---------- Very narrow phones 320–380px ---------- */
@media (max-width: 380px) {
  /* Drop the supporting line so all four buttons stay perfectly aligned */
  .dock-item .dock-label .sub { display: none; }
  .dock-item .dock-label .title { font-size: 0.72rem; }
  .dock-item {
    min-height: 54px;
    padding: 0.5rem;
  }
  .dock-item .dock-icon { width: 28px; height: 28px; }
  .dock-item .dock-icon img { width: 20px; height: 20px; }
}


/* ============================================================
   6 · TRANSITION DOCK → LATEST ARTICLES  ·  REFINED
   ------------------------------------------------------------
   Tighten the lotus divider, close the vertical gap, and give
   the first section header a subtle backdrop so it reads
   cleanly against the warm temple background.
   ============================================================ */
@media (max-width: 820px) {
  /* Quiet lotus dividers everywhere on mobile */
  .divider-lotus {
    padding: 0.55rem 0;
    gap: 1rem;
    opacity: 0.12;
  }
  .divider-lotus::before,
  .divider-lotus::after { max-width: 60px; }
  .divider-lotus i { font-size: 0.95rem; }

  .divider-line { padding: 0.25rem 0; }
  .divider-line .line { width: 44px; }
}


/* ============================================================
   7 · SECTION HEADERS  ·  READABILITY
   ------------------------------------------------------------
   On mobile the page sits over the temple background + overlay,
   which is warm and mid-tone. A very restrained cream blur
   panel behind the header makes the h2 and .sub immediately
   legible without turning the page into a stack of cards.
   ============================================================ */
@media (max-width: 820px) {
  .section-header-custom {
    background: rgba(252, 249, 242, 0.62);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
    padding: 0.95rem 0.85rem 1.05rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.4rem;
    border: 1px solid rgba(184, 148, 44, 0.08);
    box-shadow: 0 4px 20px rgba(43, 36, 28, 0.04);
  }

  .section-header-custom h2 {
    font-size: clamp(1.5rem, 6.2vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #14100c;
  }
  .section-header-custom .sub {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #2f2a24;
    opacity: 0.92;
    padding: 0 0.15rem;
  }
  .section-header-custom .section-label {
    font-size: 0.55rem;
    letter-spacing: 3px;
    padding: 0.22rem 1.05rem;
    margin-bottom: 0.45rem;
  }
  .section-header-custom .header-divider {
    gap: 0.7rem;
    margin: 0.55rem 0 0.15rem;
  }
  .section-header-custom .header-divider .line { width: 32px; }
}

@media (max-width: 480px) {
  .section-header-custom {
    padding: 0.85rem 0.7rem 0.95rem;
    margin-bottom: 1.2rem;
    border-radius: var(--radius-sm);
  }
  .section-header-custom h2 { font-size: clamp(1.35rem, 7vw, 1.7rem); }
  .section-header-custom .sub { font-size: 0.86rem; }
}


/* ============================================================
   8 · SECTION RHYTHM
   ============================================================ */
@media (max-width: 768px) {
  .container { padding: 0 1.15rem; }

  /* Tighter top padding so each section begins closer to the
     section above — the header backdrop already gives it air. */
  .section-spacing { padding: 2rem 0 2.6rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .section-spacing { padding: 1.7rem 0 2.2rem; }
}

@media (max-width: 360px) {
  .container { padding: 0 0.85rem; }
  .section-header-custom h2 { font-size: 1.28rem; }
}


/* ============================================================
   9 · FEATURED CARD — single column, image never over-tall
   ============================================================ */
@media (max-width: 900px) {
  .featured-card {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: var(--radius-md);
    border-width: 1.5px;
    margin-bottom: 1.6rem;
  }
  .featured-card .featured-image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .featured-card .featured-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .featured-card .featured-content {
    padding: 1.35rem 1.25rem 1.5rem;
    gap: 0.45rem;
  }
  .featured-card .featured-content .category-tag {
    font-size: 0.55rem;
    padding: 0.15rem 0.7rem;
  }
  .featured-card .featured-content h3 {
    font-size: clamp(1.2rem, 5.2vw, 1.5rem);
    line-height: 1.25;
  }
  .featured-card .featured-content .featured-meta {
    font-size: 0.74rem;
    gap: 0.6rem 1rem;
  }
  .featured-card .featured-content .featured-desc {
    font-size: 0.87rem;
    line-height: 1.6;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .featured-card .featured-content .featured-actions { margin-top: 0.5rem; }
  .featured-card .featured-content .btn-primary-featured {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    padding: 0.7rem 1.4rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .featured-card .featured-image { aspect-ratio: 16 / 9; }
  .featured-card .featured-content { padding: 1.15rem 1.05rem 1.3rem; }
}


/* ============================================================
   10 · CONTENT CARD GRIDS  (Mandir · Bhajan · Science)
   ============================================================ */
@media (max-width: 768px) {
  .unified-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    max-width: 100%;
    padding: 0;
  }
  .content-card-unified {
    border-radius: var(--radius-sm);
    border-width: 1.5px;
  }
  .content-card-unified .card-image-wrap { aspect-ratio: 4 / 3; }
  .content-card-unified .card-body {
    padding: 0.9rem 0.95rem 1.05rem;
    gap: 0.35rem;
  }
  .content-card-unified .card-body .card-title {
    font-size: 0.94rem;
    line-height: 1.3;
  }
  .content-card-unified .card-body .card-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }
  .content-card-unified .card-body .card-meta {
    font-size: 0.66rem;
    gap: 0.5rem;
    margin-top: 0.15rem;
  }
  .content-card-unified .card-body .card-action {
    font-size: 0.74rem;
    margin-top: 0.4rem;
  }
  .content-card-unified .card-image-wrap .card-badge {
    top: 0.55rem;
    left: 0.55rem;
    font-size: 0.53rem;
    padding: 0.15rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .unified-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .content-card-unified .card-image-wrap { aspect-ratio: 16 / 9; }
  .content-card-unified .card-body { padding: 1rem 1.05rem 1.15rem; }
  .content-card-unified .card-body .card-title { font-size: 1rem; }
  .content-card-unified .card-body .card-desc {
    font-size: 0.84rem;
    -webkit-line-clamp: 3;
  }
}


/* ============================================================
   11 · VIEW-ALL BUTTON
   ============================================================ */
@media (max-width: 768px) {
  .view-all-wrapper { margin-top: 1.7rem; }
  .view-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    font-size: 0.85rem;
  }
}
/* ============================================================
   1b · TEMPLE BACKGROUND · mobile crop + tint
   ------------------------------------------------------------
   On narrow viewports `background-size: cover` scales a
   landscape temple image by height, leaving only a small
   central slice visible. Shift the focal point upward (the
   shikhara / dome / upper architecture lives in the top third
   of the artwork) and soften the warm overlay so the image
   reads clearly behind the hero and the button panel without
   becoming noisy.

   Desktop is untouched — every rule sits inside a max-width
   media query.
   ============================================================ */
@media (max-width: 820px) {
  body {
    background-image: url("images/temple-bg.jpg");
    background-size: cover;
    background-position: center 22%;   /* keep the temple top in-frame */
    background-repeat: no-repeat;
    background-attachment: scroll;     /* reinforces section 1; fixed stutters on iOS */
  }

  .page-overlay {
    background: rgba(176, 102, 23, 0.22);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

@media (max-width: 480px) {
  body {
    background-position: center 18%;   /* nudge a touch higher on small phones */
  }

  .page-overlay {
    /* very small phones have the least screen real estate —
       lighten both the tint and the blur so the temple isn't lost */
    background: rgba(176, 102, 23, 0.18);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
  }
}

/* ============================================================
   12 · MANTHAN FORUM
   ============================================================ */
@media (max-width: 768px) {
  #manthan-section .manthan-grid { gap: 1.15rem; }

  #manthan-section .discussions,
  #manthan-section .create-discussion {
    padding: 1.25rem 1.1rem;
    border-radius: var(--radius-sm);
  }
  #manthan-section .discussions h3,
  #manthan-section .create-discussion h3 {
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
  }
  #manthan-section .manthan-tabs {
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
  }
  #manthan-section .manthan-tabs button {
    font-size: 0.72rem;
    padding: 0.45rem 0.9rem;
    min-height: 40px;
  }
  #manthan-section .discussion-list { gap: 0.65rem; }
  #manthan-section .discussion-item { padding: 0.85rem 0.9rem; }
  #manthan-section .discussion-item h4 { font-size: 0.9rem; }
  #manthan-section .discussion-item p  { font-size: 0.8rem; }
  #manthan-section .discussion-meta {
    font-size: 0.68rem;
    gap: 0.5rem 0.9rem;
    flex-wrap: wrap;
  }
  #manthan-section .discuss-form input,
  #manthan-section .discuss-form textarea {
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    min-height: 46px;
  }
  #manthan-section .discuss-form textarea { min-height: 110px; }
  #manthan-section .btn-gold {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}


/* ============================================================
   13 · FUTURE EXPERIENCES
   ============================================================ */
@media (max-width: 768px) {
  .coming-grid { grid-template-columns: 1fr; gap: 1rem; }
  .coming-card { padding: 1.4rem 1.2rem; }
  .coming-card i { font-size: 1.9rem; margin-bottom: 0.6rem; }
  .coming-card h4 { font-size: 1.05rem; }
  .coming-card p { font-size: 0.82rem; }
  .coming-badge { font-size: 0.5rem; padding: 0.15rem 0.9rem; }
}


/* ============================================================
   14 · DETAIL / INFO MODALS — 44px touch targets
   ============================================================ */
@media (max-width: 768px) {
  .detail-cta-primary { min-height: 48px; }
  .detail-actions-secondary { gap: 0.6rem; }
  .detail-actions-secondary button {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
  }
  .detail-share-print button {
    width: 44px;
    height: 44px;
    font-size: 0.9rem;
  }
  .detail-share-print .print-btn {
    min-height: 44px;
    padding: 0 1.1rem;
  }
  .detail-close { width: 44px; height: 44px; font-size: 1.05rem; }
  .modal-card { padding: 1.6rem 1.3rem; }
  .close-modal { min-height: 46px; padding: 0.6rem 1.6rem; }
}


/* ============================================================
   15 · FOOTER
   ============================================================ */
@media (max-width: 768px) {
  .footer-col ul li a { padding: 0.28rem 0; }
  .footer-bottom .copyright { font-size: 0.72rem; line-height: 1.55; }
}

@media (max-width: 480px) {
  .premium-footer { padding-top: 1.8rem; margin-top: 2rem; }
  .footer-contact-card { padding: 1.15rem; }
  .footer-contact-card .contact-email a { font-size: 0.85rem; }
  .footer-bottom .copyright { font-size: 0.68rem; }
  .footer-bottom .credit { font-size: 0.56rem; }
}


/* ============================================================
   16 · SHORT LANDSCAPE PHONES
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .hero { min-height: 260px; }
  .hero-content { padding-bottom: 2.6rem; }
  .explore-dock { margin-top: -20px; }
}