/* =========================================================
   MAGAZINE THEME — HOME FEATURED
   Editorial reviews grid
========================================================= */


/* =========================================================
   SECTION
========================================================= */

html[data-theme="magazine"] .feature-strip,
html[data-theme-preview="magazine"] .feature-strip{
  position:relative;

  margin:58px 0 54px !important;
  padding:0 !important;

  color:#111 !important;
  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* =========================================================
   SECTION HEAD
========================================================= */

html[data-theme="magazine"] .feature-head,
html[data-theme-preview="magazine"] .feature-head{
  position:relative;

  display:flex !important;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;

  min-height:0;

  margin:0 0 20px !important;
  padding:0 0 14px 18px !important;

  background:transparent !important;

  border:0 !important;
  border-bottom:4px solid #111 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* Barra rossa editoriale */

html[data-theme="magazine"] .feature-head::before,
html[data-theme-preview="magazine"] .feature-head::before{
  content:"";

  position:absolute;
  top:0;
  bottom:14px;
  left:0;

  width:7px;

  background:var(--mag-red, #dc2626);
}


/* Elimina decorazioni Premium */

html[data-theme="magazine"] .feature-head::after,
html[data-theme-preview="magazine"] .feature-head::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   HEAD CONTENT
========================================================= */

html[data-theme="magazine"] .feature-head__content,
html[data-theme-preview="magazine"] .feature-head__content{
  min-width:0;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* =========================================================
   KICKER
========================================================= */

html[data-theme="magazine"] .feature-kicker,
html[data-theme-preview="magazine"] .feature-kicker{
  display:inline-flex;
  align-items:center;

  width:max-content;
  min-height:24px;

  margin:0 0 9px !important;
  padding:0 8px !important;

  color:#fff !important;
  background:var(--mag-red, #dc2626) !important;

  border:0 !important;
  border-radius:0 !important;

  font-family:var(--font-sans, Arial, sans-serif);
  font-size:9px !important;
  font-weight:950 !important;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;

  box-shadow:none !important;
}


/* =========================================================
   TITLE
========================================================= */

html[data-theme="magazine"] .feature-title,
html[data-theme-preview="magazine"] .feature-title{
  margin:0 !important;
  padding:0 !important;

  color:#111 !important;
  background:transparent !important;

  border:0 !important;

  font-family:var(--font-serif, Georgia, serif);
  font-size:clamp(36px,3.4vw,54px) !important;
  font-weight:800 !important;
  line-height:.92 !important;
  letter-spacing:-.055em !important;
  text-transform:none !important;

  text-wrap:balance;

  box-shadow:none !important;
}


/* =========================================================
   SUBTITLE
========================================================= */

html[data-theme="magazine"] .feature-subtitle,
html[data-theme-preview="magazine"] .feature-subtitle{
  max-width:560px;

  margin:9px 0 0 !important;
  padding:0 !important;

  color:#666 !important;

  font-family:var(--font-serif, Georgia, serif);
  font-size:14px !important;
  font-weight:500;
  line-height:1.45;
}



/* =========================================================
   CARD
========================================================= */

html[data-theme="magazine"] .feature-card,
html[data-theme-preview="magazine"] .feature-card{
  position:relative;

  display:flex !important;
  flex-direction:column;

  min-width:0;
  min-height:0;

  margin:0 !important;
  padding:0 0 16px !important;

  color:#111 !important;
  background:transparent !important;

  border:0 !important;
  border-bottom:1px solid #d5d5d5 !important;
  border-radius:0 !important;

  box-shadow:none !important;
  overflow:visible !important;

  text-decoration:none !important;
}


/* Accento rosso inferiore */

html[data-theme="magazine"] .feature-card::after,
html[data-theme-preview="magazine"] .feature-card::after{
  content:"";

  position:absolute;
  right:0;
  bottom:-1px;
  left:0;

  height:3px;

  background:var(--mag-red, #dc2626);

  transform:scaleX(0);
  transform-origin:left center;

  transition:transform .2s ease;
}

html[data-theme="magazine"] .feature-card:hover::after,
html[data-theme-preview="magazine"] .feature-card:hover::after{
  transform:scaleX(1);
}


/* =========================================================
   MEDIA
========================================================= */

html[data-theme="magazine"] .feature-card__media,
html[data-theme-preview="magazine"] .feature-card__media{
  position:relative !important;
  inset:auto !important;

  display:block;

  width:100%;
  aspect-ratio:16 / 9;

  margin:0 0 14px !important;
  padding:0 !important;

  background:#ddd !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
  overflow:hidden;
}


/* =========================================================
   IMAGE
========================================================= */

html[data-theme="magazine"] .feature-card__media picture,
html[data-theme="magazine"] .feature-card__media img,
html[data-theme="magazine"] .feature-card__img,
html[data-theme-preview="magazine"] .feature-card__media picture,
html[data-theme-preview="magazine"] .feature-card__media img,
html[data-theme-preview="magazine"] .feature-card__img{
  display:block;

  width:100%;
  height:100%;

  margin:0 !important;

  object-fit:cover;
  object-position:center;

  border:0 !important;
  border-radius:0 !important;

  transform:scale(1);
  filter:none;

  transition:
    transform .45s ease,
    filter .45s ease;
}

html[data-theme="magazine"] .feature-card:hover .feature-card__img,
html[data-theme="magazine"] .feature-card:hover .feature-card__media img,
html[data-theme-preview="magazine"] .feature-card:hover .feature-card__img,
html[data-theme-preview="magazine"] .feature-card:hover .feature-card__media img{
  transform:scale(1.035);
  filter:saturate(.92) contrast(1.05);
}


/* =========================================================
   REMOVE OVERLAY
========================================================= */

html[data-theme="magazine"] .feature-card__overlay,
html[data-theme-preview="magazine"] .feature-card__overlay{
  display:none !important;
}


/* =========================================================
   CARD BODY
========================================================= */

html[data-theme="magazine"] .feature-card-body,
html[data-theme-preview="magazine"] .feature-card-body{
  position:relative !important;
  inset:auto !important;
  z-index:auto;

  display:flex !important;
  flex-direction:column;
  align-items:flex-start;

  min-width:0;

  margin:0 !important;
  padding:0 !important;

  color:#111 !important;
  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* =========================================================
   CATEGORY
========================================================= */

html[data-theme="magazine"] .feature-card-category,
html[data-theme-preview="magazine"] .feature-card-category{
  display:inline-flex !important;
  align-items:center;

  width:max-content;
  min-height:22px;

  margin:0 0 9px !important;
  padding:0 7px !important;

  color:#fff !important;
  background:var(--mag-red, #dc2626) !important;

  border:0 !important;
  border-radius:0 !important;

  font-family:var(--font-sans, Arial, sans-serif);
  font-size:8px !important;
  font-weight:950 !important;
  line-height:1;
  letter-spacing:.07em;
  text-transform:uppercase;

  box-shadow:none !important;
}


/* =========================================================
   CARD TITLE
========================================================= */

html[data-theme="magazine"] .feature-card-title,
html[data-theme-preview="magazine"] .feature-card-title{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;

  min-height:3.2em;

  margin:0 0 10px !important;
  padding:0 !important;

  color:#111 !important;

  font-family:var(--font-serif, Georgia, serif);
  font-size:21px !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;

  text-wrap:balance;

  transition:color .18s ease;
}

html[data-theme="magazine"] .feature-card:hover .feature-card-title,
html[data-theme-preview="magazine"] .feature-card:hover .feature-card-title{
  color:var(--mag-red, #dc2626) !important;
}


/* =========================================================
   DATE
========================================================= */

html[data-theme="magazine"] .feature-card-date,
html[data-theme-preview="magazine"] .feature-card-date{
  margin:auto 0 0 !important;
  padding:0 !important;

  color:#858585 !important;

  font-family:var(--font-sans, Arial, sans-serif);
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
}


/* Simbolo editoriale prima della data */

html[data-theme="magazine"] .feature-card-date::before,
html[data-theme-preview="magazine"] .feature-card-date::before{
  content:"";

  display:inline-block;

  width:5px;
  height:5px;

  margin-right:7px;

  background:var(--mag-red, #dc2626);

  border-radius:50%;

  vertical-align:1px;
}





/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  html[data-theme="magazine"] .feature-card__img,
  html[data-theme-preview="magazine"] .feature-card__img{
    transition:none;
  }
}

/* =========================================================
   MAGAZINE FEATURED — SLIDER
========================================================= */

html[data-theme="magazine"] .feature-head,
html[data-theme-preview="magazine"] .feature-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
}


/* =========================================================
   CONTROLS
========================================================= */

html[data-theme="magazine"] .feature-controls,
html[data-theme-preview="magazine"] .feature-controls{
  display:flex;
  align-items:center;
  gap:7px;

  margin:0 0 1px !important;
  padding:0 !important;
}

html[data-theme="magazine"] .feature-control,
html[data-theme-preview="magazine"] .feature-control{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  margin:0;
  padding:0;

  color:#111;
  background:#fff;

  border:1px solid #cfcfcf;
  border-radius:0;

  font:inherit;
  font-size:18px;
  font-weight:800;
  line-height:1;

  cursor:pointer;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}

html[data-theme="magazine"] .feature-control:hover:not(:disabled),
html[data-theme-preview="magazine"] .feature-control:hover:not(:disabled){
  color:#fff;
  background:var(--mag-red, #dc2626);
  border-color:var(--mag-red, #dc2626);
}

html[data-theme="magazine"] .feature-control:focus-visible,
html[data-theme-preview="magazine"] .feature-control:focus-visible{
  outline:3px solid rgba(220,38,38,.22);
  outline-offset:2px;
}

html[data-theme="magazine"] .feature-control:disabled,
html[data-theme-preview="magazine"] .feature-control:disabled{
  color:#aaa;
  background:#f4f4f4;
  border-color:#ddd;
  cursor:not-allowed;
  opacity:.65;
}


/* =========================================================
   COUNTER
========================================================= */

html[data-theme="magazine"] .feature-counter,
html[data-theme-preview="magazine"] .feature-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;

  min-width:52px;
  height:38px;

  color:#666;

  font-family:var(--font-sans, Arial, sans-serif);
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
}


/* =========================================================
   VIEWPORT
========================================================= */

html[data-theme="magazine"] .feature-slider-viewport,
html[data-theme-preview="magazine"] .feature-slider-viewport{
  width:100%;

  margin:0;
  padding:0 0 8px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;

  scrollbar-width:none;
}

html[data-theme="magazine"] .feature-slider-viewport::-webkit-scrollbar,
html[data-theme-preview="magazine"] .feature-slider-viewport::-webkit-scrollbar{
  display:none;
}

html[data-theme="magazine"] .feature-slider-viewport:focus-visible,
html[data-theme-preview="magazine"] .feature-slider-viewport:focus-visible{
  outline:2px solid var(--mag-red, #dc2626);
  outline-offset:5px;
}


/* =========================================================
   TRACK
========================================================= */

html[data-theme="magazine"] .feature-grid,
html[data-theme-preview="magazine"] .feature-grid{
  display:flex !important;
  align-items:stretch;

  gap:24px !important;

  width:100%;
}


/* Tre elementi su desktop */

html[data-theme="magazine"] .feature-card,
html[data-theme-preview="magazine"] .feature-card{
  flex:0 0 calc((100% - 48px) / 3);

  scroll-snap-align:start;
  scroll-snap-stop:always;
}


/* Disattiva le vecchie differenze tra prima e seconda riga */

html[data-theme="magazine"] .feature-card:nth-child(n),
html[data-theme-preview="magazine"] .feature-card:nth-child(n){
  padding-top:0 !important;
}

html[data-theme="magazine"] .feature-card:nth-child(n) .feature-card__media,
html[data-theme-preview="magazine"] .feature-card:nth-child(n) .feature-card__media{
  aspect-ratio:16 / 9;
}

html[data-theme="magazine"] .feature-card:nth-child(n) .feature-card-title,
html[data-theme-preview="magazine"] .feature-card:nth-child(n) .feature-card-title{
  font-size:22px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1000px){

  html[data-theme="magazine"] .feature-card,
  html[data-theme-preview="magazine"] .feature-card{
    flex-basis:calc((100% - 20px) / 2);
  }

  html[data-theme="magazine"] .feature-grid,
  html[data-theme-preview="magazine"] .feature-grid{
    gap:20px !important;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px){

  html[data-theme="magazine"] .feature-head,
  html[data-theme-preview="magazine"] .feature-head{
    grid-template-columns:1fr;
    align-items:start;
    gap:15px;
  }

  html[data-theme="magazine"] .feature-controls,
  html[data-theme-preview="magazine"] .feature-controls{
    margin-left:0 !important;
  }

  html[data-theme="magazine"] .feature-grid,
  html[data-theme-preview="magazine"] .feature-grid{
    display:flex !important;
    gap:14px !important;
  }

  html[data-theme="magazine"] .feature-card,
  html[data-theme-preview="magazine"] .feature-card{
    flex:0 0 88%;
  }

  html[data-theme="magazine"] .feature-card:nth-child(n) .feature-card-title,
  html[data-theme-preview="magazine"] .feature-card:nth-child(n) .feature-card-title{
    font-size:20px !important;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  html[data-theme="magazine"] .feature-slider-viewport,
  html[data-theme-preview="magazine"] .feature-slider-viewport{
    scroll-behavior:auto;
  }
}