/* Port diretto di assets/shared/explore.css dal sito Hugo. */
.ex {
  padding-block: clamp(72px, 10vw, 148px);
  border-top: 1px solid var(--ex-line, rgba(21, 20, 14, 0.14));
  background: var(--ex-bg, transparent);
  color: var(--ex-ink, #15140e);
}
.ex__inner {
  width: 100%;
  max-width: var(--ex-maxw, 1280px);
  margin-inline: auto;
  padding-inline: var(--ex-gutter, clamp(20px, 5vw, 56px));
}
.ex__head { margin-bottom: clamp(36px, 5vw, 64px); }
.ex__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--ex-font-mono, "JetBrains Mono", monospace);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ex-mut, #807d6f);
}
.ex__eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.ex__title {
  margin-top: 16px;
  font-family: var(--ex-font-display, sans-serif);
  font-weight: 600; font-size: clamp(26px, 6.2vw, 84px);
  line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--ex-ink, #15140e);
}
.ex__lead {
  margin-top: 18px; max-width: 46ch;
  color: var(--ex-mut, #807d6f);
  font-size: clamp(15px, 2vw, 18px); line-height: 1.55;
}
.ex__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.ex-card {
  position: relative; z-index: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(340px, 42vw, 460px);
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 14px; overflow: hidden; isolation: isolate;
  color: #fff; background: #15140e; text-decoration: none;
  transition: transform .6s var(--ex-ease, cubic-bezier(.22,1,.36,1)), box-shadow .6s var(--ex-ease, cubic-bezier(.22,1,.36,1));
  will-change: transform;
}
.ex-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 3;
  background: var(--xaccent, #1e2bff); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ex-ease, cubic-bezier(.22,1,.36,1));
}
.ex-card:hover::before, .ex-card:focus-visible::before { transform: scaleX(1); }
.ex-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--xaccent, #1e2bff) 60%, transparent), transparent 62%);
  opacity: 0; mix-blend-mode: screen; transition: opacity .5s var(--ex-ease, cubic-bezier(.22,1,.36,1));
}
.ex-card:hover::after { opacity: .85; }
.ex-card__media { position: absolute; inset: 0; z-index: 0; }
.ex-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 1.1s var(--ex-ease, cubic-bezier(.22,1,.36,1));
}
.ex-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,6,0) 26%, rgba(12,10,6,.34) 54%, rgba(12,10,6,.84) 100%);
}
.ex-card--flat .ex-card__media {
  background: radial-gradient(130% 120% at 22% 8%, color-mix(in srgb, var(--xaccent, #1e2bff) 78%, #fff) 0%, var(--xaccent, #1e2bff) 42%, color-mix(in srgb, var(--xaccent, #1e2bff) 55%, #000) 100%);
}
.ex-card--flat .ex-card__veil { background: linear-gradient(180deg, rgba(6,5,20,0) 42%, rgba(6,5,20,.30) 100%); }
.ex-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; transform: translateY(8px); transition: transform .6s var(--ex-ease, cubic-bezier(.22,1,.36,1)); }
.ex-card__kicker {
  font-family: var(--ex-font-mono, "JetBrains Mono", monospace);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--xaccent, #1e2bff) 42%, #fff);
  text-shadow: 0 1px 12px rgba(12, 10, 6, 0.6);
}
.ex-card__label { font-family: var(--ex-font-display, sans-serif); font-weight: 600; font-size: clamp(30px, 3.4vw, 46px); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.ex-card__text { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.45; max-width: 26ch; }
.ex-card__go { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--ex-font-mono, "JetBrains Mono", monospace); font-size: 13px; letter-spacing: 0.04em; color: #fff; opacity: .9; }
.ex-card__arrow { display: inline-block; transition: transform .5s var(--ex-ease, cubic-bezier(.22,1,.36,1)); }
.ex-card:hover, .ex-card:focus-visible { transform: translateY(-8px); box-shadow: 0 34px 64px -26px rgba(12,10,6,.55); }
.ex-card:hover .ex-card__media img, .ex-card:focus-visible .ex-card__media img { transform: scale(1.09); }
.ex-card:hover .ex-card__body, .ex-card:focus-visible .ex-card__body { transform: none; }
.ex-card:hover .ex-card__arrow, .ex-card:focus-visible .ex-card__arrow { transform: translate(4px, -4px); }
.ex-card:focus-visible { outline: 2px solid var(--xaccent, #1e2bff); outline-offset: 3px; }
.ex [data-ex-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ex-ease, cubic-bezier(.22,1,.36,1)), transform .8s var(--ex-ease, cubic-bezier(.22,1,.36,1)); }
.ex [data-ex-reveal].is-in { opacity: 1; transform: none; }
.ex [data-ex-reveal][data-ex-delay="1"] { transition-delay: .08s; }
.ex [data-ex-reveal][data-ex-delay="2"] { transition-delay: .16s; }
.ex [data-ex-reveal][data-ex-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .ex [data-ex-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .ex-card, .ex-card__media img, .ex-card__body, .ex-card__arrow, .ex-card::before, .ex-card::after { transition: none; }
}