/* CIF Esplora — card con logo e nome in sovraimpressione.
 * Isolato sotto .cif-explore: navbar e altre pagine non vengono alterate.
 */

.explore-page-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(38px, 7vw, 78px) clamp(24px, 4vw, 38px);
}
.explore-page-hero h1 {
  margin: 0;
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: .89;
  letter-spacing: -.075em;
}
.explore-page-hero__dot { color: var(--cyan, #38d8ff); }
.explore-page-hero p:not(.eyebrow) { max-width: 650px; margin: 18px 0 0; color: var(--muted, #9fb1c4); }
.explore-page-hero__accent { color: rgba(255,255,255,.15); font: 800 clamp(1.8rem, 4.5vw, 4rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; white-space: nowrap; }
.explore-page-hero__accent span { display: block; color: var(--cyan, #38d8ff); font-size: .2em; letter-spacing: .4em; text-align: right; }
.explore-page-main { padding-bottom: clamp(58px, 8vw, 110px); }

.cif-explore { display: grid; grid-template-columns: minmax(215px, 255px) minmax(0, 1fr); gap: 17px; align-items: start; }
.cif-explore *, .cif-explore *::before, .cif-explore *::after { box-sizing: border-box; }
.cif-explore__sidebar { position: sticky; top: 100px; min-width: 0; padding: 16px; }
.cif-explore__small-heading { margin: 5px 9px 16px; color: var(--muted-2, #71849a); font-size: .69rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.cif-explore__tabs { display: grid; gap: 6px; }
.cif-explore__tab {
  display: grid; grid-template-columns: 27px minmax(0, 1fr) 20px; align-items: center; gap: 9px;
  width: 100%; min-height: 58px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 13px;
  background: transparent; color: var(--muted, #9fb1c4); cursor: pointer;
  text-align: left; font: 800 .92rem Manrope, system-ui, sans-serif; transition: background .2s ease, border .2s ease, color .2s ease;
}
.cif-explore__tab-index { font-size: .65rem; color: var(--muted-2, #71849a); }
.cif-explore__tab-arrow { color: var(--muted-2, #71849a); text-align: right; }
.cif-explore__tab:hover { background: rgba(255,255,255,.055); color: var(--text, #f5f8fc); }
.cif-explore__tab.is-active { color: var(--text, #f5f8fc); background: rgba(56,216,255,.095); border-color: rgba(56,216,255,.25); }
.cif-explore__tab.is-active .cif-explore__tab-index, .cif-explore__tab.is-active .cif-explore__tab-arrow { color: var(--cyan, #38d8ff); }
.cif-explore__tab:focus-visible, .cif-explore__card:focus-visible, .cif-explore__links a:focus-visible { outline: 2px solid var(--cyan, #38d8ff); outline-offset: 3px; }
.cif-explore__links { display: grid; gap: 3px; margin-top: 23px; padding-top: 19px; border-top: 1px solid var(--line, rgba(151,181,216,.16)); }
.cif-explore__links .cif-explore__small-heading { margin-bottom: 7px; }
.cif-explore__links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--muted, #9fb1c4); font-size: .79rem; font-weight: 750; }
.cif-explore__links a:hover { color: var(--text, #f5f8fc); background: rgba(255,255,255,.045); }
.cif-explore__links a span { color: var(--cyan, #38d8ff); }

.cif-explore__content { min-width: 0; padding: clamp(17px, 2.5vw, 27px); }
.cif-explore__content-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.cif-explore__content-header h2 { margin: 0; font: 750 clamp(1.6rem, 3vw, 2.3rem)/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.045em; }
.cif-explore__hint { margin: 10px 0 0; color: var(--muted, #9fb1c4); font-size: .78rem; line-height: 1.5; }
.cif-explore__count { flex: 0 0 auto; min-width: 42px; padding: 7px 10px; border: 1px solid var(--line, rgba(151,181,216,.16)); border-radius: 999px; color: var(--cyan, #38d8ff); font: 850 .77rem "Space Grotesk", system-ui, sans-serif; text-align: center; }
.cif-explore__toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 11px; margin: 23px 0 17px; }
.cif-explore__search { display: flex; flex: 1 1 210px; align-items: center; gap: 10px; max-width: 480px; min-height: 45px; padding: 0 13px; border: 1px solid var(--line, rgba(151,181,216,.16)); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--muted-2, #71849a); }
.cif-explore__search:focus-within { border-color: rgba(56,216,255,.52); box-shadow: 0 0 0 4px rgba(56,216,255,.065); }
.cif-explore__search input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text, #f5f8fc); font: 500 .82rem Manrope, system-ui, sans-serif; }
.cif-explore__search input::placeholder { color: var(--muted-2, #71849a); }
.cif-explore__instruction { color: var(--muted-2, #71849a); font-size: .69rem; }

.cif-explore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(9px, 1.2vw, 14px); align-content: start; min-height: 240px; }
.cif-explore__card {
  isolation: isolate; display: block; position: relative; min-width: 0; aspect-ratio: 1 / 1.03; overflow: hidden;
  border: 1px solid var(--line, rgba(151,181,216,.16)); border-radius: 19px;
  background: radial-gradient(circle at 50% 34%, rgba(56,216,255,.075), transparent 66%), linear-gradient(145deg, rgba(19,42,67,.93), rgba(7,18,32,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, box-shadow .24s ease;
  text-decoration: none; color: var(--text, #f5f8fc);
}
.cif-explore__card::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.035); border-radius: 13px; pointer-events: none; z-index: 3; }
.cif-explore__card:hover { transform: translateY(-5px); border-color: rgba(56,216,255,.44); box-shadow: 0 18px 45px rgba(0,0,0,.25); }
.cif-explore__image-box { display: grid; position: absolute; inset: 0; place-items: center; padding: 14%; }
.cif-explore__image-box img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.27)); transition: transform .36s cubic-bezier(.2,.8,.2,1), filter .36s ease; }
.cif-explore__card:hover img, .cif-explore__card:focus-visible img { transform: scale(1.065); filter: drop-shadow(0 18px 22px rgba(0,0,0,.33)); }
.cif-explore__image-fallback { display: grid; place-items: center; width: 56%; aspect-ratio: 1; border: 1px solid rgba(56,216,255,.28); border-radius: 28%; color: var(--cyan, #38d8ff); background: rgba(56,216,255,.08); font: 800 clamp(2rem, 5vw, 3.8rem) "Space Grotesk", sans-serif; }
.cif-explore__image-fallback[hidden] { display: none; }
.cif-explore__overlay {
  position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; justify-content: end; align-items: flex-start;
  gap: 5px; padding: clamp(13px, 1.9vw, 21px);
  background: linear-gradient(180deg, rgba(2,8,16,.30) 0%, rgba(2,8,16,.70) 46%, rgba(2,8,16,.96) 100%);
  opacity: 0; transform: translateY(5px); transition: opacity .25s ease, transform .25s ease;
}
.cif-explore__card:hover .cif-explore__overlay, .cif-explore__card:focus-visible .cif-explore__overlay { opacity: 1; transform: none; }
.cif-explore__meta { max-width: 100%; color: var(--cyan, #38d8ff); font-size: .64rem; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; overflow-wrap: anywhere; }
.cif-explore__name { max-width: 100%; color: #fff; font: 750 clamp(.87rem, 1.45vw, 1.27rem)/1.15 "Space Grotesk", Manrope, sans-serif; overflow-wrap: anywhere; text-wrap: balance; }
.cif-explore__open { position: absolute; right: 17px; top: 14px; color: #fff; font-size: 1.15rem; }
.cif-explore__card[hidden] { display: none !important; }
.cif-explore__skeleton { aspect-ratio: 1 / 1.03; border-radius: 19px; background: linear-gradient(110deg, rgba(255,255,255,.025) 10%, rgba(255,255,255,.075) 36%, rgba(255,255,255,.025) 60%); background-size: 230% 100%; animation: cifExploreShimmer 1.3s linear infinite; }
@keyframes cifExploreShimmer { to { background-position: -230% 0; } }
.cif-explore__message { grid-column: 1 / -1; color: var(--muted, #9fb1c4); padding: 30px 10px; text-align: center; }
.cif-explore__empty, .cif-explore__notice { padding: 32px 14px; border: 1px dashed var(--line, rgba(151,181,216,.16)); border-radius: 16px; color: var(--muted, #9fb1c4); text-align: center; }
.cif-explore__empty[hidden], .cif-explore__notice[hidden] { display: none; }
.cif-explore__notice button { margin-left: 8px; padding: 7px 12px; border: 1px solid rgba(56,216,255,.25); border-radius: 10px; color: var(--cyan, #38d8ff); background: rgba(56,216,255,.07); cursor: pointer; }

@media (hover: none), (pointer: coarse) {
  .cif-explore__overlay { opacity: 1; transform: none; background: linear-gradient(180deg, transparent 35%, rgba(2,8,16,.4) 52%, rgba(2,8,16,.95) 100%); }
  .cif-explore__image-box { padding: 11% 13% 20%; }
  .cif-explore__instruction { display: none; }
}
@media (max-width: 1100px) {
  .cif-explore { grid-template-columns: 220px minmax(0, 1fr); }
  .cif-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .explore-page-hero { align-items: flex-start; padding-top: 30px; }
  .explore-page-hero__accent { display: none; }
  .cif-explore { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cif-explore__sidebar { position: static; padding: 12px; }
  .cif-explore__sidebar > .cif-explore__small-heading { display: none; }
  .cif-explore__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cif-explore__tab { grid-template-columns: 1fr; min-height: 52px; justify-items: center; padding: 8px 4px; font-size: .77rem; }
  .cif-explore__tab-index, .cif-explore__tab-arrow { display: none; }
  .cif-explore__links { display: none; }
  .cif-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  .cif-explore__content { padding: 12px; }
  .cif-explore__name { font-size: .88rem; }
  .cif-explore__overlay { padding: 11px; }
  .cif-explore__meta { font-size: .57rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cif-explore__card, .cif-explore__card img, .cif-explore__overlay { transition: none; }
  .cif-explore__skeleton { animation: none; }
}
/* L'attributo hidden deve prevalere sul display dell'immagine. */
.cif-explore__image-box img[hidden] { display: none !important; }