/* Magazine Lucone1973 — 03 masthead */

/* ——— Masthead ——— */
.blog-np-masthead {
  width: 100%;
  background: var(--np-surface);
  border-bottom: 1px solid var(--np-line);
}

.blog-np-masthead__row {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem 1.1rem;
  padding: 0.45rem 0;
  background: var(--np-surface);
}

.blog-np-masthead__row > * {
  position: relative;
  z-index: 1;
}

.blog-np-masthead__brand {
  justify-self: start;
  display: flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
  min-width: min-content;
  text-decoration: none;
}

/* PNG trasparente su masthead neutro (niente overflow:hidden + scale che tagliano il logo) */
.blog-np-masthead__logo-wrap {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  height: clamp(104px, 12.5vw, 148px);
  max-width: min(96vw, 680px);
  width: min(88vw, 620px);
  line-height: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.blog-np-masthead__logo {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  transform: none;
  transition: transform 0.2s var(--np-ease-out);
}

.blog-np-masthead__brand:hover .blog-np-masthead__logo {
  transform: scale(1.02);
}

/* Tablet / phone */
@media (max-width: 640px) {
  .blog-np-masthead__logo-wrap {
    height: clamp(108px, 26vw, 152px);
    width: min(94vw, 100%);
    max-width: min(96vw, 640px);
  }
}

/* Colonna destra: box Kick live centrato nello spazio residuo */
.blog-np-masthead__center {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.15rem;
  width: 100%;
  min-width: 0;
  max-width: min(100%, 20rem);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.blog-np-masthead__live-slot {
  flex: 0 0 auto;
  max-width: min(12.5rem, 100%);
  padding: 0.55rem 0.65rem 0.6rem;
  box-sizing: border-box;
  background: linear-gradient(165deg, #ffffff 0%, var(--np-bg-elevated) 48%, #f0f1f4 100%);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-lg);
  box-shadow:
    var(--np-shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(83, 252, 24, 0.06);
}

.blog-np-masthead__live {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  max-width: 11.25rem;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
  border-radius: calc(var(--np-radius-lg) - 2px);
  transition:
    transform 0.28s var(--np-ease-out),
    filter 0.28s var(--np-ease-out);
}

.blog-np-masthead__live:hover {
  transform: translateY(-2px);
}

.blog-np-masthead__live:hover .blog-np-masthead__live-thumb {
  transform: scale(1.03);
}

.blog-np-masthead__live:hover .blog-np-masthead__live-thumb-wrap {
  box-shadow:
    0 10px 28px rgba(13, 13, 18, 0.14),
    0 0 0 1px rgba(198, 40, 40, 0.12),
    0 0 24px rgba(83, 252, 24, 0.08);
}

.blog-np-masthead__live:focus-visible {
  outline: 2px solid var(--np-focus);
  outline-offset: 3px;
}

.blog-np-masthead__live--offline {
  cursor: pointer;
}

.blog-np-masthead__live--offline:hover {
  transform: translateY(-1px);
}

.blog-np-masthead__live--offline:hover .blog-np-masthead__live-pill--offline {
  filter: brightness(1.03);
}

.blog-np-masthead__live-offline-hint {
  display: block;
  margin-top: 0.4rem;
  text-align: center;
  font-family: var(--np-cond);
  font-size: clamp(9px, 2.1vw, 10px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--np-muted, #6b6e76);
  line-height: 1.2;
}

.blog-np-masthead__live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.32rem;
  border-radius: 999px;
  font-family: var(--np-cond);
  font-size: clamp(10px, 2.4vw, 11px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #c62828 0%, #e53935 42%, #ef5350 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 0 rgba(0, 0, 0, 0.12),
    0 3px 12px rgba(198, 40, 40, 0.4),
    0 0 0 1px rgba(83, 252, 24, 0.25);
}

.blog-np-masthead__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.45),
    0 0 10px rgba(255, 82, 82, 0.9);
  animation: blog-np-live-dot-pulse 1.15s ease-in-out infinite;
}

.blog-np-masthead__live-pill--offline {
  color: #3d4047;
  text-shadow: none;
  background: linear-gradient(145deg, #e8e9ec 0%, #d7d9df 45%, #c9ccd4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(13, 13, 18, 0.08),
    0 0 0 1px rgba(13, 13, 18, 0.06);
}

.blog-np-masthead__live-dot--offline {
  background: #8b9099;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: none;
}

.blog-np-masthead__live-text {
  line-height: 1.15;
}

@keyframes blog-np-live-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.45),
      0 0 10px rgba(255, 82, 82, 0.9);
  }
  50% {
    opacity: 0.88;
    transform: scale(0.9);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.25),
      0 0 6px rgba(255, 82, 82, 0.5);
  }
}

.blog-np-masthead__live-thumb-wrap {
  display: block;
  width: 100%;
  max-width: 11.25rem;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  background: linear-gradient(145deg, #1a1a1e 0%, #0d0d10 100%);
  box-shadow:
    0 4px 16px rgba(13, 13, 18, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.28s var(--np-ease-out);
}

.blog-np-masthead__live-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  vertical-align: middle;
  transition: transform 0.35s var(--np-ease-out);
}

/* Tablet / laptop stretto: live sotto logo */
@media (max-width: 1200px) {
  .blog-np-masthead__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.65rem 0.75rem;
  }

  .blog-np-masthead__brand {
    justify-self: unset;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(100%, 520px);
  }

  .blog-np-masthead__center {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    justify-self: unset;
    flex-direction: column;
    align-items: center;
  }
}

/* Telefono / tablet stretto: logo e live card affiancati in griglia 2×1 (no stacking).
   Usiamo CSS Grid con !important per battere l'override `flex: 1 1 100%` del range 1200px. */
@media (max-width: 700px) {
  .blog-np-masthead__row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    grid-auto-flow: row;
    flex-wrap: nowrap;
    align-items: center !important;
    justify-items: stretch;
    gap: 0.45rem 0.55rem !important;
    padding-left: clamp(6px, 2.5vw, 14px);
    padding-right: clamp(6px, 2.5vw, 14px);
  }

  .blog-np-masthead__brand {
    grid-column: 1 / 2 !important;
    order: 1;
    justify-self: start !important;
    align-self: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
  }

  .blog-np-masthead__center {
    grid-column: 2 / 3 !important;
    order: 2;
    justify-self: center !important;
    align-self: center !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .blog-np-masthead__logo-wrap {
    width: 100%;
    height: clamp(64px, 18vw, 96px);
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .blog-np-masthead__live-slot {
    max-width: 100%;
    width: 100%;
    padding: 0.4rem 0.45rem 0.45rem;
    box-sizing: border-box;
  }

  .blog-np-masthead__live {
    max-width: 100%;
    gap: 0.3rem;
  }
}

/* Telefoni stretti (<=400px): comprimiamo logo+live, social e CTA */
@media (max-width: 400px) {
  .blog-np-masthead__row {
    gap: 0.35rem 0.4rem !important;
  }

  .blog-np-masthead__logo-wrap {
    height: clamp(54px, 17vw, 78px);
  }

  .blog-np-masthead__live-slot {
    padding: 0.32rem 0.38rem 0.38rem;
  }

  .blog-np-masthead__live-offline-hint {
    margin-top: 0.25rem;
    letter-spacing: 0.05em;
  }

  .blog-np-masthead__social-link {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 9px;
  }

  .blog-np-masthead__social-svg {
    width: 17px;
    height: 17px;
  }

  .blog-np-masthead__cta {
    padding: 0.45rem 0.55rem;
    gap: 0.45rem;
  }

  .blog-np-masthead__cta-kick {
    width: 2.05rem;
    height: 2.05rem;
  }

  .blog-np-masthead__cta-kick-svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .blog-np-masthead__cta-title {
    font-size: 11px;
    letter-spacing: 0.055em;
  }

  .blog-np-masthead__cta-sub {
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }

  .blog-np-masthead__cta-go {
    display: none;
  }
}

.blog-np-masthead__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.blog-np-masthead__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  flex-shrink: 0;
  border-radius: 11px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 10px rgba(13, 13, 18, 0.18);
  transition:
    border-color var(--np-duration) var(--np-ease-out),
    box-shadow var(--np-duration) var(--np-ease-out),
    transform var(--np-duration) var(--np-ease-out),
    filter var(--np-duration) var(--np-ease-out);
}

.blog-np-masthead__social-link--instagram {
  background: linear-gradient(138deg, #fccc63 0%, #fbad50 12%, #e95950 32%, #cd2f89 58%, #8c3baa 82%, #4c68d7 100%);
  border-color: rgba(255, 220, 180, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 3px 16px rgba(205, 47, 137, 0.38);
}

.blog-np-masthead__social-link--kick {
  line-height: 0;
  background: linear-gradient(145deg, rgba(83, 252, 24, 0.2) 0%, rgba(83, 252, 24, 0.05) 100%);
  border-color: rgba(83, 252, 24, 0.38);
  color: #53fc18;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 16px rgba(83, 252, 24, 0.12);
}

.blog-np-masthead__social-link--kick .blog-np-masthead__social-svg {
  filter: drop-shadow(0 0 6px rgba(83, 252, 24, 0.5));
}

.blog-np-masthead__social-link--twitch {
  background: linear-gradient(160deg, #c9a3ff 0%, #9146ff 38%, #5b21b6 100%);
  border-color: rgba(201, 163, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 3px 16px rgba(145, 70, 255, 0.45);
}

.blog-np-masthead__social-link--discord {
  background: linear-gradient(160deg, #9aa7ff 0%, #5865f2 42%, #3b45a8 100%);
  border-color: rgba(180, 190, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 3px 16px rgba(88, 101, 242, 0.45);
}

.blog-np-masthead__social-link--email {
  background: linear-gradient(160deg, #64b5f6 0%, #1e88e5 45%, #0d47a1 100%);
  border-color: rgba(144, 202, 249, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 3px 16px rgba(30, 136, 229, 0.4);
}

.blog-np-masthead__social-link:hover {
  filter: brightness(1.08);
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.65);
}

.blog-np-masthead__social-link--instagram:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 28px rgba(225, 48, 108, 0.55);
}

.blog-np-masthead__social-link--kick:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 18px rgba(83, 252, 24, 0.2);
}

.blog-np-masthead__social-link--twitch:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 28px rgba(145, 70, 255, 0.55);
}

.blog-np-masthead__social-link--discord:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 28px rgba(88, 101, 242, 0.55);
}

.blog-np-masthead__social-link--email:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 28px rgba(30, 136, 229, 0.5);
}

.blog-np-masthead__social-link:active {
  transform: translateY(0) scale(1.02);
  filter: brightness(0.98);
}

.blog-np-masthead__social-link:focus-visible {
  outline: 2px solid var(--np-focus);
  outline-offset: 3px;
}

.blog-np-masthead__social-svg {
  display: block;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

.blog-np-masthead__cta {
  --cta-kick: #53fc18;
  --cta-kick-soft: rgba(83, 252, 24, 0.14);
  position: relative;
  flex-shrink: 0;
  max-width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 0.65rem;
  min-height: 48px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--np-cond);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(165deg, #323238 0%, #1c1c20 42%, #121214 100%);
  border: 1px solid rgba(83, 252, 24, 0.32);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.14),
    0 0 28px rgba(83, 252, 24, 0.07);
  overflow: hidden;
  transition:
    background var(--np-duration) var(--np-ease-out),
    border-color var(--np-duration) var(--np-ease-out),
    box-shadow var(--np-duration) var(--np-ease-out),
    transform var(--np-duration) var(--np-ease-out);
}

.blog-np-masthead__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 120% at 0% 0%, rgba(83, 252, 24, 0.11) 0%, transparent 58%);
  pointer-events: none;
}

.blog-np-masthead__cta > * {
  position: relative;
  z-index: 1;
}

.blog-np-masthead__cta-kick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(83, 252, 24, 0.2) 0%, rgba(83, 252, 24, 0.05) 100%);
  border: 1px solid rgba(83, 252, 24, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 16px rgba(83, 252, 24, 0.12);
  line-height: 0;
}

.blog-np-masthead__cta-kick-svg {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--cta-kick);
  filter: drop-shadow(0 0 6px rgba(83, 252, 24, 0.5));
}

.blog-np-masthead__cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
  text-align: left;
  padding-right: 0.15rem;
}

.blog-np-masthead__cta-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.blog-np-masthead__cta-sub {
  font-family: var(--np-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(200, 255, 175, 0.88);
}

.blog-np-masthead__cta-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: -0.1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  background: rgba(83, 252, 24, 0.1);
  color: var(--cta-kick);
  opacity: 0.9;
  transition: background var(--np-duration) var(--np-ease-out), color var(--np-duration) var(--np-ease-out), opacity var(--np-duration) var(--np-ease-out);
}

.blog-np-masthead__cta-go-svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 1px;
}

.blog-np-masthead__cta:hover {
  background: linear-gradient(165deg, #3a3a42 0%, #222228 45%, #161618 100%);
  border-color: rgba(83, 252, 24, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 6px 22px rgba(0, 0, 0, 0.18),
    0 0 36px rgba(83, 252, 24, 0.14);
  color: #fff;
  transform: translateY(-1px);
}

.blog-np-masthead__cta:hover .blog-np-masthead__cta-kick-svg {
  color: #7fff4a;
}

.blog-np-masthead__cta:hover .blog-np-masthead__cta-go {
  background: rgba(83, 252, 24, 0.18);
  color: #7fff4a;
  opacity: 1;
}

.blog-np-masthead__cta:active {
  transform: translateY(0);
}

.blog-np-masthead__cta:focus-visible {
  outline: 2px solid var(--np-focus);
  outline-offset: 3px;
}