/* ============================================================
   IC PUGLIA ART — 2026-04-27
   Iconografia e silhouette Puglia-specific (no foto esterne).
   Componenti: hero gradient, trullo, olivo, sea-waves, sun,
   cattedrale, faro Brindisi, mappa silhouette pugliese.
   ============================================================ */

/* === HERO GRADIENT con sottotono Puglia === */
.ic-puglia-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 100%, rgba(255,204,51,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 0%, rgba(20,101,163,.12) 0%, transparent 50%),
    linear-gradient(135deg, #0b2340 0%, #1e3a8a 60%, #1465a3 100%);
  color: #fff;
}
.ic-puglia-hero--sunset {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(227,93,77,.20) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 0%, rgba(255,204,51,.30) 0%, transparent 50%),
    linear-gradient(180deg, #06182d 0%, #1a3055 50%, #2a4870 100%);
}
.ic-puglia-hero--paper {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(255,204,51,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(20,101,163,.06) 0%, transparent 50%),
    var(--ic-paper);
  color: var(--ic-ink);
}

/* Pattern decoration: sun rays + sea waves */
.ic-puglia-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* sole/luna in alto a destra */
    radial-gradient(circle at 88% 18%, rgba(255,204,51,.85) 0%, rgba(255,204,51,0) 8%),
    /* sea waves subtle */
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 80px,
      rgba(255,255,255,.025) 80px,
      rgba(255,255,255,.025) 81px);
  pointer-events: none;
}

/* === SVG ICONOGRAFIA — usate via inline SVG con queste classi === */
.ic-art {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-art--filled { fill: currentColor; stroke: none; }
.ic-art-trullo { color: var(--ic-gold); }
.ic-art-olivo  { color: rgba(255,204,51,.5); }
.ic-art-mare   { color: rgba(255,255,255,.3); }

/* === PUGLIA SILHOUETTE PATH === */
.ic-puglia-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ic-puglia-svg__shape {
  fill: rgba(255,204,51,.06);
  stroke: rgba(255,204,51,.45);
  stroke-width: 2;
  stroke-linejoin: round;
}
.ic-puglia-svg__shape--solid { fill: rgba(255,204,51,.10); }
.ic-puglia-svg__pin {
  fill: var(--ic-gold);
  filter: drop-shadow(0 0 8px rgba(255,204,51,.7));
  cursor: pointer;
  transition: transform 200ms ease;
}
.ic-puglia-svg__pin:hover { transform: scale(1.3); transform-origin: center; }
.ic-puglia-svg__pin-pulse {
  animation: pin-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes pin-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.15); }
}
.ic-puglia-svg__label {
  font: 700 14px var(--ic-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: rgba(255,255,255,.85);
  pointer-events: none;
}

/* === ATTRACT MODE: pulsing CTA per kiosk inattivo === */
@keyframes attract-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,204,51,.55), 0 0 32px rgba(255,204,51,.35); }
  50%      { box-shadow: 0 0 0 18px rgba(255,204,51,0), 0 0 32px rgba(255,204,51,.35); }
}
.ic-attract { animation: attract-pulse 2s ease-out infinite; }

/* === LANGUAGE PILL (component condiviso) === */
.ic-lp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--ic-r-full);
  color: #fff;
  font: 700 13px var(--ic-font-mono);
  letter-spacing: .04em;
  cursor: pointer;
  transition: all var(--ic-tr-base);
  backdrop-filter: blur(10px);
}
.ic-lp:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.ic-lp--light {
  background: rgba(11,35,64,.06);
  border-color: rgba(11,35,64,.18);
  color: var(--ic-navy);
}
.ic-lp__chev { transition: transform var(--ic-tr-base); }
.ic-lp[aria-expanded="true"] .ic-lp__chev { transform: rotate(180deg); }
.ic-lp__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0; padding: 6px;
  list-style: none;
  background: var(--ic-navy);
  border: 1px solid rgba(255,204,51,.25);
  border-radius: var(--ic-r-md);
  box-shadow: var(--ic-sh-lg);
  z-index: 200;
}
.ic-lp__menu[hidden] { display: none; }
.ic-lp__menu li { margin: 0; padding: 0; }
.ic-lp__menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 500 14px/1.2 var(--ic-font-body);
  text-align: left;
  cursor: pointer;
  border-radius: var(--ic-r-sm);
}
.ic-lp__menu button:hover { background: rgba(255,255,255,.08); }
.ic-lp__menu button[aria-current="true"] { background: rgba(255,204,51,.15); color: var(--ic-gold); }
.ic-lp__sub {
  margin-left: auto;
  font: 700 11px var(--ic-font-mono);
  letter-spacing: .12em;
  opacity: .6;
}

/* === QR CARD (kiosk: porta a casa) === */
.ic-qr {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,204,51,.25);
  border-radius: var(--ic-r-lg);
}
.ic-qr__img {
  width: 72px; height: 72px;
  background: #fff;
  padding: 6px;
  border-radius: var(--ic-r-sm);
}
.ic-qr__img img { display: block; width: 100%; height: 100%; }
.ic-qr__body { display: flex; flex-direction: column; gap: 4px; }
.ic-qr__h {
  font: 700 13px var(--ic-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ic-gold);
}
.ic-qr__d {
  font: 500 13px var(--ic-font-body);
  color: rgba(255,255,255,.78);
  max-width: 220px;
  line-height: 1.4;
}

/* === FOCUS RING accessibile === */
.ic-focusable:focus-visible {
  outline: 3px solid var(--ic-gold);
  outline-offset: 3px;
  border-radius: var(--ic-r-sm);
}

/* === EVENT TICKER (kiosk-h footer) === */
.ic-ticker {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  white-space: nowrap;
  font: 600 13px var(--ic-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ic-ticker__rail {
  display: inline-flex;
  gap: 32px;
  animation: tick 38s linear infinite;
}
.ic-ticker__rail:hover { animation-play-state: paused; }
.ic-ticker__item { display: inline-flex; align-items: center; gap: 8px; }
.ic-ticker__item::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ic-gold);
  display: inline-block;
}
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}