/* ============================================================
   InfoComuni — Mobile App Premium (iOS-inspired)
   v1.0 — 2026-05-27
   Si attiva solo su viewport <= 768px. Trasforma il sito in PWA.
   ============================================================ */

/* ===== Variabili globali mobile ===== */
:root {
  --ic-mob-navy: #0b2340;
  --ic-mob-gold: #f3b840;
  --ic-mob-emerald: #1f8763;
  --ic-mob-text: #0b2340;
  --ic-mob-muted: #6b7585;
  --ic-mob-bg: #f8fafc;
  --ic-mob-card: #ffffff;
  --ic-mob-border: rgba(11, 35, 64, 0.08);
  --ic-mob-shadow: 0 1px 3px rgba(11, 35, 64, 0.06), 0 4px 18px rgba(11, 35, 64, 0.04);
  --ic-mob-shadow-up: 0 -2px 12px rgba(11, 35, 64, 0.08);
  --ic-mob-radius: 14px;
  --ic-mob-radius-lg: 18px;
  --ic-mob-tap: 48px;

  /* Safe area iOS (notch + home indicator) */
  --ic-mob-safe-top: env(safe-area-inset-top, 0px);
  --ic-mob-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ic-mob-safe-left: env(safe-area-inset-left, 0px);
  --ic-mob-safe-right: env(safe-area-inset-right, 0px);

  /* Bottom nav height */
  --ic-mob-bnav-h: 64px;
}

/* ===== Smooth scroll + momentum iOS ===== */
@media (max-width: 768px) {
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(11, 35, 64, 0.08);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: calc(var(--ic-mob-bnav-h) + var(--ic-mob-safe-bottom));
  }
  /* No tap highlight blu su iOS — usiamo il nostro */
  a, button { -webkit-tap-highlight-color: transparent; }
  /* Prevenzione zoom iOS sui field <16px */
  input, textarea, select { font-size: 16px; }

  /* ===== Status bar area (per safe top in PWA standalone) ===== */
  .ic-mob-statusbar {
    height: var(--ic-mob-safe-top);
    background: var(--ic-mob-navy);
  }

  /* ===== Bottom Tab Bar (iOS-style) ===== */
  .ic-mob-bnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--ic-mob-border);
    padding-bottom: var(--ic-mob-safe-bottom);
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .ic-mob-bnav__item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    min-height: var(--ic-mob-tap);
    padding: 8px 4px 10px;
    text-decoration: none;
    color: var(--ic-mob-muted);
    transition: color 0.2s ease;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
  }
  .ic-mob-bnav__item:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  .ic-mob-bnav__item.is-active {
    color: var(--ic-mob-emerald);
  }
  .ic-mob-bnav__icon {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
  }
  .ic-mob-bnav__icon svg {
    width: 24px; height: 24px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ic-mob-bnav__item.is-active .ic-mob-bnav__icon svg {
    fill: rgba(31, 135, 99, 0.10);
    stroke-width: 2.0;
  }
  .ic-mob-bnav__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
  }

  /* ===== Top app header (compact + sticky) ===== */
  .ic-mob-appheader {
    position: sticky; top: 0; z-index: 100;
    background: rgba(11, 35, 64, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    color: #fff;
    padding: calc(var(--ic-mob-safe-top) + 10px) 16px 12px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .ic-mob-appheader__logo {
    height: 26px; width: auto;
  }
  .ic-mob-appheader__spacer { flex: 1; }
  .ic-mob-appheader__action {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 0;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .ic-mob-appheader__action:active { background: rgba(255, 255, 255, 0.18); }
  .ic-mob-appheader__action svg { width: 18px; height: 18px; }

  /* ===== Hero mobile compact ===== */
  .ic-mob-hero {
    padding: 28px 20px 32px;
    background:
      radial-gradient(circle at 100% 0%, rgba(243, 184, 64, 0.10) 0%, transparent 50%),
      linear-gradient(160deg, #0b2340 0%, #0d3050 100%);
    color: #fff;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    margin-bottom: -12px;
  }
  .ic-mob-hero__kicker {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--ic-mob-gold);
    margin-bottom: 6px;
  }
  .ic-mob-hero__title {
    margin: 0 0 8px;
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: #fff !important;
  }
  .ic-mob-hero__sub {
    margin: 0 0 18px;
    font-size: 14.5px; line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
  }

  /* ===== Search bar mobile (sticky sotto header) ===== */
  .ic-mob-search {
    position: relative;
    margin: 16px;
    margin-top: 0;
  }
  .ic-mob-search__input {
    width: 100%;
    background: var(--ic-mob-card);
    border: 1px solid var(--ic-mob-border);
    border-radius: 12px;
    padding: 14px 44px 14px 44px;
    font-size: 16px;
    color: var(--ic-mob-text);
    box-shadow: var(--ic-mob-shadow);
    -webkit-appearance: none;
    appearance: none;
  }
  .ic-mob-search__input:focus {
    outline: 0;
    border-color: var(--ic-mob-emerald);
    box-shadow: 0 0 0 4px rgba(31, 135, 99, 0.10), var(--ic-mob-shadow);
  }
  .ic-mob-search__icon {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    pointer-events: none;
    color: var(--ic-mob-gold);
  }
  .ic-mob-search__clear {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(11, 35, 64, 0.10);
    border: 0;
    color: var(--ic-mob-text);
    display: none;
    align-items: center; justify-content: center;
    cursor: pointer;
  }
  .ic-mob-search__clear:active { background: rgba(11, 35, 64, 0.18); }
  .ic-mob-search__input:not(:placeholder-shown) ~ .ic-mob-search__clear {
    display: inline-flex;
  }

  /* ===== Cards Argomenti del Cittadino — mobile (stack verticale) ===== */
  .ic-mob-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 0 16px 24px;
  }
  .ic-mob-card {
    background: var(--ic-mob-card);
    border: 1px solid var(--ic-mob-border);
    border-radius: var(--ic-mob-radius-lg);
    padding: 18px 16px 20px;
    box-shadow: var(--ic-mob-shadow);
    text-decoration: none;
    color: inherit;
    display: flex; flex-direction: column;
    gap: 8px;
    min-height: 132px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
  }
  .ic-mob-card:active {
    transform: scale(0.97);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  .ic-mob-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(243, 184, 64, 0.18) 0%, rgba(243, 184, 64, 0.08) 100%);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
  }
  .ic-mob-card__icon svg {
    width: 24px; height: 24px;
    stroke: var(--ic-mob-navy);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ic-mob-card__title {
    font-size: 15px; font-weight: 800;
    color: var(--ic-mob-navy);
    margin: 0;
    letter-spacing: -0.005em;
  }
  .ic-mob-card__desc {
    font-size: 12.5px;
    color: var(--ic-mob-muted);
    margin: 0;
    line-height: 1.4;
    flex: 1;
  }
  .ic-mob-card__chev {
    position: absolute;
    bottom: 14px; right: 14px;
    color: var(--ic-mob-emerald);
    font-size: 16px;
    font-weight: 700;
  }

  /* Section title (eyebrow style) */
  .ic-mob-section-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ic-mob-muted);
    padding: 0 20px;
    margin: 24px 0 12px;
  }
  .ic-mob-section-h {
    font-size: 22px; font-weight: 800;
    color: var(--ic-mob-navy);
    padding: 0 20px;
    margin: 0 0 14px;
    letter-spacing: -0.018em;
  }

  /* ===== Override desktop layout su mobile dove serve ===== */
  /* News.html: sidebar sx + dx nascoste, mostro un bottone "Filtri" che apre modal */
  .nt-shell-3col { grid-template-columns: 1fr !important; padding: 16px !important; gap: 16px !important; }
  .nt-side, .nt-filters {
    position: static !important;
    margin-bottom: 12px;
    max-height: none;
  }
  .nt-cards { grid-template-columns: 1fr !important; gap: 14px !important; }
  .nt-tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .nt-tab { flex-shrink: 0; }
  .nt-hero__title { font-size: 26px !important; }
  .nt-hero { padding: 22px 18px 18px !important; }
  .nt-toolbar { padding: 0 18px 18px !important; }

  /* Bando detail mobile */
  .bn-hero__title { font-size: 22px !important; }
  .bn-hero { padding: 22px 18px 24px !important; }
  .bn-quickstats { grid-template-columns: 1fr !important; gap: 10px !important; }
  .bn-card { padding: 18px 16px !important; border-radius: var(--ic-mob-radius-lg) !important; }
  .bn-cta-fonte__btn { width: 100%; justify-content: center; padding: 15px 24px !important; font-size: 16px !important; }
  .bn-related__grid { grid-template-columns: 1fr !important; }
}

/* ===== Touch device: disabilita hover effects ===== */
@media (hover: none) {
  .jc-card:hover { transform: none; box-shadow: 0 1px 3px rgba(11, 35, 64, 0.06); }
  .nt-chip:hover { background: #f3f4f7; }
}

/* ===== PWA standalone mode: nascondi browser chrome ===== */
@media (display-mode: standalone) {
  .ic-mob-appheader { padding-top: calc(var(--ic-mob-safe-top) + 14px); }
}