/* =========================================================
   ARTICLE PAGE – FOODTRIPGO
   Premium editorial article + expandable text cards + flip gallery
========================================================= */

.ftg-article-page{
  background:#ffffff;
}

.article-page-top{
  padding-top:110px;
  padding-bottom:90px;
  background:
    radial-gradient(circle at top left, rgba(219,39,39,.07), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(0,0,0,.045), transparent 25%),
    linear-gradient(180deg,#ffffff 0%,#f7f3ef 100%);
}

.article-container{
  max-width:1380px;
}

/* BACK LINK */

.article-back-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:34px;
  color:rgba(0,0,0,.72);
  text-decoration:none;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.02em;
  transition:.2s ease;
}

.article-back-link:hover{
  color:var(--red);
  transform:translateX(-2px);
}

/* STATUS */

.article-status{
  padding:28px;
  border-radius:28px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.06);
}

/* MAIN LAYOUT */

.article-shell-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:72px;
  align-items:start;
}

.article-main{
  min-width:0;
  max-width:880px;
}

.article-sidebar{
  position:sticky;
  top:108px;
}

/* HEADER */

.article-header{
  margin-bottom:54px;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}

.article-badge{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(219,39,39,.12), rgba(219,39,39,.06));
  color:var(--red);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.article-title{
  margin:0 0 24px;
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(3rem,5vw,5.5rem);
  line-height:.92;
  letter-spacing:-.07em;
  text-wrap:balance;
}

.article-excerpt{
  max-width:760px;
  margin:0 0 22px;
  color:rgba(0,0,0,.68);
  font-size:clamp(1.1rem,1.7vw,1.38rem);
  line-height:1.55;
  font-weight:500;
}

.article-date{
  color:rgba(0,0,0,.55);
  font-size:.95rem;
  font-weight:700;
}

/* CONTENT BASE */

.article-content{
  color:rgba(0,0,0,.82);
  font-size:1.07rem;
  line-height:1.84;
}

.article-content > p{
  margin:0 0 24px;
}

.article-content p{
  text-wrap:pretty;
}

.article-content strong{
  font-weight:850;
  color:#111111;
}

.article-content em{
  color:rgba(0,0,0,.72);
}

.article-content a{
  color:var(--red);
  font-weight:800;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.article-content blockquote{
  margin:42px 0;
  padding:28px 32px;
  border-left:4px solid var(--red);
  border-radius:0 24px 24px 0;
  background:rgba(255,255,255,.72);
  color:rgba(0,0,0,.74);
  font-size:1.18rem;
  line-height:1.7;
  box-shadow:0 16px 40px rgba(0,0,0,.045);
}

.article-content ul,
.article-content ol{
  margin:24px 0 32px;
  padding-left:24px;
}

.article-content li{
  margin-bottom:10px;
}

/* SECTION TITLES */

.article-content h2{
  position:relative;
  margin:92px 0 34px;
  padding-bottom:18px;
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:.96;
  letter-spacing:-.055em;
  color:#111111;
  text-wrap:balance;
}

.article-content h2:first-child{
  margin-top:0;
}

.article-content h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:78px;
  height:3px;
  background:var(--red);
}

.article-content h3{
  margin:46px 0 18px;
  color:#111111;
  font-size:1.55rem;
  line-height:1.15;
  letter-spacing:-.035em;
}

/* EXPANDABLE EDITORIAL CARDS */

.article-accordion{
  display:grid;
  gap:18px;
  margin-top:28px;
}

.article-entry{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:
    radial-gradient(circle at top left, rgba(219,39,39,.055), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,243,239,.96));
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.06);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.article-entry:hover{
  transform:translateY(-2px);
  border-color:rgba(219,39,39,.18);
  box-shadow:0 28px 80px rgba(0,0,0,.10);
}

.article-entry-toggle{
  width:100%;
  border:0;
  background:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:28px 30px;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
}

.article-entry-index{
  flex:0 0 auto;
  color:rgba(219,39,39,.62);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.16em;
}

.article-entry-main{
  flex:1;
  min-width:0;
}

.article-entry-title{
  display:block;
  margin:0 0 8px;
  color:#111111;
  font-size:1.42rem;
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:850;
}

.article-entry-preview{
  display:block;
  color:rgba(0,0,0,.62);
  line-height:1.6;
  font-size:.98rem;
}

.article-entry-readmore{
  display:inline-flex;
  margin-top:12px;
  color:var(--red);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.article-entry-icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(219,39,39,.08);
  color:var(--red);
  font-size:1.2rem;
  font-weight:900;
  transition:transform .24s ease, background .24s ease, color .24s ease;
}

.article-entry.is-open .article-entry-icon{
  transform:rotate(45deg);
  background:var(--red);
  color:#ffffff;
}

.article-entry-content{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .34s ease;
}

.article-entry-content-inner{
  overflow:hidden;
  padding:0 30px;
  color:rgba(0,0,0,.82);
  line-height:1.8;
}

.article-entry.is-open .article-entry-content{
  grid-template-rows:1fr;
}

.article-entry.is-open .article-entry-content-inner{
  padding-bottom:30px;
}

.article-entry-content p:last-child{
  margin-bottom:0;
}

/* GALLERY */

.article-gallery-card{
  padding:22px;
  border-radius:34px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 70px rgba(0,0,0,.08);
  backdrop-filter:blur(18px);
}

.article-gallery-heading{
  margin-bottom:20px;
}

.article-gallery-kicker{
  margin:0 0 8px;
  color:var(--red);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.article-gallery-heading h2{
  margin:0;
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.8rem;
  line-height:1;
  letter-spacing:-.04em;
}

.article-gallery-grid{
  display:grid;
  gap:16px;
}

.article-flip-card{
  position:relative;
  perspective:1400px;
  cursor:pointer;
}

.article-flip-inner{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.7,.2,1);
}

.article-flip-card-cover .article-flip-inner{
  aspect-ratio:4 / 5.8;
}

.article-flip-card-cover{
  margin-bottom:22px;
}

@media (hover:hover){
  .article-flip-card:hover .article-flip-inner{
    transform:rotateY(180deg);
  }
}

.article-flip-card.is-flipped .article-flip-inner{
  transform:rotateY(180deg);
}

.article-flip-front,
.article-flip-back{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:26px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.article-flip-front{
  background:#111111;
}

.article-flip-front img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.article-flip-front::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.42));
}

.article-flip-back{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(219,39,39,.22), transparent 38%),
    linear-gradient(135deg,#111111,#000000);
  color:#ffffff;
  transform:rotateY(180deg);
}

.article-flip-label{
  margin-bottom:10px;
  color:rgba(255,255,255,.62);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.article-flip-back h3{
  margin:0 0 12px;
  color:#ffffff;
  font-size:1.2rem;
  line-height:1.08;
  letter-spacing:-.035em;
}

.article-flip-back p{
  margin:0 0 16px;
  color:rgba(255,255,255,.76);
  font-size:.9rem;
  line-height:1.55;
}

.article-flip-link,
.article-image-open{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#ffffff;
  text-decoration:none;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:.24s ease;
}

.article-flip-link:hover,
.article-image-open:hover{
  background:var(--red);
  transform:translateY(-2px);
}

.article-carousel-empty{
  padding:22px;
  border-radius:24px;
  background:rgba(0,0,0,.045);
  color:rgba(0,0,0,.55);
  font-weight:700;
}

/* PREV / NEXT */

.article-neighbour-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:86px;
}

.article-neighbour{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:28px;
  border-radius:30px;
  text-decoration:none;
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,243,239,.96));
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.06);
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.article-neighbour:hover{
  transform:translateY(-3px);
  border-color:rgba(219,39,39,.2);
  box-shadow:0 28px 70px rgba(0,0,0,.10);
}

.article-neighbour small{
  display:block;
  margin-bottom:8px;
  color:var(--red);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.article-neighbour strong{
  display:block;
  color:#111111;
  font-size:1.15rem;
  line-height:1.25;
}

.article-neighbour-arrow{
  color:var(--red);
  font-size:1.4rem;
  font-weight:900;
}

/* FINAL CTA */

.article-final-cta{
  padding:92px 0;
  background:
    radial-gradient(circle at top left, rgba(219,39,39,.18), transparent 30%),
    linear-gradient(135deg,#111111,#000000);
  color:#ffffff;
}

.article-final-cta h2{
  margin:0 0 18px;
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(2.3rem,4vw,4rem);
  line-height:1;
  letter-spacing:-.055em;
}

.article-final-cta p{
  color:rgba(255,255,255,.78);
}

/* FAB */

.article-fab{
  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:opacity .24s ease, transform .24s ease;
}

.article-fab.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* RESPONSIVE */

@media (max-width:1100px){
  .article-shell-layout{
    grid-template-columns:1fr;
    gap:42px;
  }

  .article-main{
    order:1;
    max-width:100%;
  }

  .article-sidebar{
    position:static;
    order:2;
  }

  .article-gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .article-flip-card-cover .article-flip-inner{
    aspect-ratio:4 / 4.2;
  }
}

@media (max-width:760px){
  .article-page-top{
    padding-top:86px;
    padding-bottom:64px;
  }

  .article-title{
    font-size:clamp(2.5rem,13vw,4rem);
  }

  .article-excerpt{
    font-size:1.08rem;
  }

  .article-content{
    font-size:1rem;
    line-height:1.76;
  }

  .article-content h2{
    margin-top:70px;
  }

  .article-entry-toggle{
    padding:24px 22px;
    gap:14px;
  }

  .article-entry-index{
    display:none;
  }

  .article-entry-title{
    font-size:1.25rem;
  }

  .article-entry-icon{
    width:38px;
    height:38px;
  }

  .article-entry-content-inner{
    padding:0 22px;
  }

  .article-entry.is-open .article-entry-content-inner{
    padding-bottom:24px;
  }

  .article-neighbour-nav{
    grid-template-columns:1fr;
    margin-top:62px;
  }

  .article-gallery-grid{
    grid-template-columns:1fr;
  }

  .article-gallery-card{
    padding:18px;
    border-radius:28px;
  }

  .article-flip-card-cover .article-flip-inner,
  .article-flip-inner{
    aspect-ratio:4 / 3.7;
  }

  .article-final-cta{
    padding:72px 0;
  }
}
/* Quando la card è aperta, l'anteprima scompare:
   il testo non viene quindi mostrato due volte. */
.article-entry.is-open .article-entry-preview {
  display: none;
}

/* Le card brevi mantengono lo stesso aspetto,
   ma non sembrano pulsanti cliccabili. */
.article-entry-static .article-entry-static-inner {
  cursor: default;
}

.article-entry-static .article-entry-static-inner:hover {
  transform: none;
}
/* =====================================================
   ARTICLE GUIDE CARDS
===================================================== */

.article-entry {
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.article-entry::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background-color 0.25s ease;
}

.article-entry.is-open {
  box-shadow: 0 18px 40px rgba(20, 20, 20, 0.08);
}

.article-entry.is-open::before {
  background: var(--color-accent, #df2525);
}

.article-entry-index {
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.article-entry.is-open .article-entry-index {
  color: var(--color-accent, #df2525);
  transform: translateY(-1px);
}

.article-entry-title {
  transition: color 0.25s ease;
}

.article-entry.is-open .article-entry-title {
  color: #111;
}

/* Piccola classificazione da guida editoriale */

.article-entry-label {
  display: block;
  margin-bottom: 7px;
  color: var(--color-accent, #df2525);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* La preview scompare quando appare il contenuto completo */

.article-entry.is-open .article-entry-preview {
  display: none;
}

/* Icona: il + ruota e diventa visivamente una × */

.article-entry-icon {
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.article-entry.is-open .article-entry-icon {
  transform: rotate(45deg);
}

/* Animazione del contenuto */

.article-entry-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.32s ease,
    opacity 0.22s ease;
}

.article-entry-content-inner {
  min-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 0.3s ease;
}

.article-entry.is-open .article-entry-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.article-entry.is-open .article-entry-content-inner {
  transform: translateY(0);
}

/* Card brevi: stesso design, nessuna falsa interazione */

.article-entry-static .article-entry-static-inner {
  cursor: default;
}

.article-entry-static .article-entry-static-inner:hover {
  transform: none;
}

.article-entry-static::before {
  display: none;
}

/* Riduzione delle animazioni per accessibilità */

@media (prefers-reduced-motion: reduce) {
  .article-entry,
  .article-entry::before,
  .article-entry-index,
  .article-entry-title,
  .article-entry-icon,
  .article-entry-content,
  .article-entry-content-inner {
    transition: none;
  }
}