/* ===========================================================
   GLOBALY — Media Kit report styles
   =========================================================== */

.mk-body{ background: var(--c-black); color: #fff; }

.mk-header{
  position:relative; overflow:hidden; padding: 120px 0 70px;
}
.mk-header-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; z-index:2; }
.mk-header-top img{ height:24px; filter:brightness(0) invert(1); }
.mk-header-actions{ display:flex; gap:12px; }
.mk-header-actions[hidden]{ display:none; }
.mk-back{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#cfc9c2; }
.mk-back svg{ width:15px; height:15px; }

.mk-header-body{ position:relative; z-index:2; margin-top:70px; }
.mk-kicker{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--c-orange-light); }
.mk-title{ font-size: clamp(42px,7vw,96px); margin-top:14px; }
.mk-period{ font-family: var(--font-body); font-size:16px; color:#cfc9c2; margin-top:14px; max-width:640px; }

.mk-stats{ margin-top:56px; display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: rgba(244,239,233,.12); border-radius:18px; overflow:hidden; position:relative; z-index:2; }
.mk-stat{ background: rgba(255,255,255,.03); padding:26px 22px; display:flex; flex-direction:column; gap:8px; }
.mk-stat-value{ font-family: var(--font-numeric); font-size: clamp(24px,2.6vw,34px); font-weight:700; }
.mk-stat-label{ font-size:12.5px; color:#a8a3a0; }

.mk-section{ padding: 60px 0; border-top:1px solid rgba(244,239,233,.08); }
.mk-section-head{ display:flex; align-items:center; gap:14px; margin-bottom:34px; }
.mk-section-num{ font-family: var(--font-display); font-size:14px; color: var(--c-orange); font-weight:700; border:1px solid rgba(232,84,43,.4); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.mk-section-head h2{ font-size: clamp(22px,2.6vw,30px); }

.mk-grid-3{ display:grid; grid-template-columns: 1fr 1fr 1.3fr; gap:36px; }
.mk-col-label{ font-size:15px; font-weight:600; color:#cfc9c2; margin:0 0 16px; }

/* gender / age bars */
.mk-bar-row, .mk-age-row{ display:grid; grid-template-columns: 66px 1fr 52px; align-items:center; gap:14px; margin-bottom:16px; }
.mk-age-row{ grid-template-columns: 58px 1fr 46px; margin-bottom:10px; }
.mk-bar-label{ font-size:11.5px; font-weight:700; letter-spacing:.05em; color:#cfc9c2; }
.mk-age-label{ font-size:12.5px; color:#cfc9c2; }
.mk-bar-value{ font-family: var(--font-numeric); font-size:13px; font-weight:600; text-align:right; }
.mk-bar-track{ height:14px; border-radius:8px; background: rgba(244,239,233,.1); overflow:hidden; }
.mk-bar-track.thin{ height:9px; border-radius:5px; }
.mk-bar-fill{ height:100%; width:0; border-radius:inherit; animation: mkGrow 1.1s var(--ease) forwards; }
.mk-bar-fill.is-accent-1{ background: linear-gradient(90deg, var(--c-orange), var(--c-orange-light)); }
.mk-bar-fill.is-accent-2{ background: linear-gradient(90deg, var(--c-orange-dark), var(--c-orange)); }
@keyframes mkGrow{ from{ width:0; } to{ width: var(--w); } }

/* locations — classifica delle città principali (percentuali indipendenti,
   non parti di un totale: una barra proporzionale avrebbe fuorviato più che
   informato). Righe allineate in altezza con le colonne Genere/Età. */
.mk-locations{ display:flex; flex-direction:column; }
.mk-loc-row{
  display:flex; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(244,239,233,.08);
}
.mk-loc-row:first-child{ padding-top:0; }
.mk-loc-row:last-child{ padding-bottom:0; border-bottom:none; }
.mk-loc-rank{
  font-family: var(--font-numeric); font-size:12px; font-weight:700; color: var(--c-orange-light);
  width:22px; flex-shrink:0;
}
.mk-loc-city{ flex:1; font-size:14.5px; font-weight:600; color:#cfc9c2; }
.mk-loc-row.mk-loc-main .mk-loc-city{ color:#fff; }
.mk-loc-pct{ font-family: var(--font-numeric); font-size:14px; font-weight:700; color: var(--c-orange-light); }

/* monthly chart */
.mk-chart-card{ background: rgba(255,255,255,.03); border:1px solid rgba(244,239,233,.08); border-radius:18px; padding:28px; height:380px; }

/* platform cards */
.mk-platforms{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:16px; }
.mk-platform-card{
  background: rgba(255,255,255,.03); border:1px solid rgba(244,239,233,.1); border-radius:16px; padding:22px;
  display:flex; flex-direction:column; gap:20px; transition: border-color .3s, transform .3s;
}
.mk-platform-card:hover{ border-color: var(--c-orange); transform: translateY(-4px); }
.mk-platform-head{ display:flex; align-items:center; gap:12px; }
.mk-platform-icon{ width:38px; height:38px; border-radius:10px; background: rgba(232,84,43,.14); color: var(--c-orange-light); display:flex; align-items:center; justify-content:center; }
.mk-platform-icon svg{ width:19px; height:19px; }
.mk-platform-head h3{ font-size:16px; }
.mk-platform-handle{ font-size:12px; color:#8a8a8d; }
.mk-platform-metrics{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.mk-platform-metrics > div{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mk-metric-value{ font-family: var(--font-numeric); font-weight:700; font-size:17px; }
.mk-metric-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#8a8a8d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-platform-growth{ font-family: var(--font-numeric); font-size:12px; font-weight:600; color: #7CFFB2; }

.mk-platform-anchor{ display:block; color:inherit; text-decoration:none; }
.mk-platform-anchor .mk-platform-card{ cursor:pointer; }
.mk-platform-link-hint{
  margin-top:-6px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  color: var(--c-orange-light); opacity:0; transform: translateX(-4px); transition: all .25s var(--ease);
}
.mk-platform-anchor:hover .mk-platform-link-hint{ opacity:1; transform:none; }

.mk-footer{ padding: 40px 0 60px; text-align:center; color:#7a7a7d; font-size:12.5px; }

/* project detail: testo descrittivo */
.proj-description{ font-size:17px; line-height:1.75; color:#cfc9c2; max-width:760px; white-space:pre-line; }

/* project detail: photo/video grid */
.project-media-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.project-media-item{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:#111; }
.project-media-item img, .project-media-item video, .project-media-item iframe{
  width:100%; height:100%; object-fit:cover; border:0; display:block;
}

/* media hub cards */
.media-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:64px; }
.media-card{
  background: rgba(255,255,255,.03); border:1px solid rgba(244,239,233,.1); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transition: border-color .3s, transform .3s;
}
.media-card:hover{ border-color: var(--c-orange); transform: translateY(-4px); }
.media-card-logo{ aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.media-card-logo img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.media-card-anchor:hover .media-card-logo img{ transform: scale(1.05); }
.media-card-logo--text span{ font-family: var(--font-display); font-weight:800; font-size:26px; color:#fff; text-align:center; padding:0 24px; }
.media-card-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:6px; flex:1; }
.media-card-num{ font-family: var(--font-display); font-size:12.5px; color: var(--c-orange-light); font-weight:700; }
.media-card-body h3{ font-size:22px; margin-top:2px; }
.media-card-tags{ font-size:13px; color:#9a9a9d; margin-bottom:14px; }

.media-card-anchor{ display:block; text-decoration:none; color:inherit; }
.media-card-cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color: var(--c-orange-light);
}
.media-card-cta-arrow{ display:inline-block; transition: transform .3s var(--ease); }
.media-card-anchor:hover .media-card-cta-arrow{ transform: translateX(5px); }

@media (max-width: 980px){
  .media-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .media-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .mk-stats{ grid-template-columns: 1fr 1fr; }
  .mk-grid-3{ grid-template-columns: 1fr; }
  .mk-platforms{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .mk-platforms{ grid-template-columns: 1fr; }
}

/* print */
@media print{
  body{ background:#0a0a0b; }
  .nav, .hero-scroll, .mk-header-actions{ display:none !important; }
  .mk-platforms{ grid-template-columns: repeat(3,1fr); }
}