/* Pagine marchio — pagine/marchi/*.html. Si carica dopo style.css, che porta navbar, footer, hero,
   il catalogo per marchio (.catalog-*, .product-card, .product-brand-badge), la fascia .finance-note,
   la FAQ (.faq-list) e .prose. Qui c'è solo quello che a quei componenti manca su questa pagina.
   Questo foglio si carica su una pagina sola: i selettori senza prefisso non escono da qui. */

/* Hero: la colonna destra è divisa in due — il nome del marchio sopra, la sua foto sotto.
   Cornice e fondo escono dal contenitore e passano ai due blocchi, che li portano ciascuno.
   Il `display` non si tocca qui: fra 781 e 900px style.css nasconde l'aside e deve restare nascosto. */
.hero__aside {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  gap: 20px;
}

.hero__aside::after {
  content: none;
}

/* <picture> non deve entrare nel layout: la foto è posizionata direttamente sull'img. */
.hero__aside picture {
  display: contents;
}

/* Lo stemma del marchio. Il file ha il fondo #f8f4f1: su --cream il `darken` lo azzera
   canale per canale e resta solo la firma, senza rettangolo visibile attorno. */
.marchio-segno {
  display: grid;
  place-items: center;
}

.marchio-segno::before {
  background: var(--cream);
}

.marchio-segno img {
  position: relative;
  width: min(74%, 290px);
  height: auto;
  mix-blend-mode: darken;
}

@media (min-width: 901px) {
  .hero__aside {
    display: grid;
    grid-template-rows: 120px minmax(0, 1fr);
  }
}

/* Fascia «rivenditore autorizzato»: la .finance-note fuori dalla duo-section.
   Metrica delle fedi: wrap 720 centrato, nota alta 68, aria 49 sopra e sotto. */
.marchio-fascia {
  padding: 34px 0;
}

/* La banda prende tutta la .shell, come la sezione sotto; il testo resta a misura di lettura */
.marchio-fascia .finance-note {
  width: 100%;
  min-height: 68px;
}

/* Corsivo Times in teal profondo, peso normale: è il registro di .storia-invito e della leva 1.1.
   Il 600 di .finance-note__text su Times si risolve in grassetto pieno, che qui pesa troppo. */
.marchio-fascia .finance-note__text {
  color: var(--teal-deep);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
}

/* Fascia e sezione seguente stanno vicine: è un'apertura, non due sezioni separate */
.marchio-fascia + .page-section {
  padding-top: clamp(34px, 3.2vw, 48px);
}

/* Sezioni di testo */
.marchio-section h2 {
  margin: 0;
}

.marchio-section h2 em,
.marchio-linea h2 em {
  color: var(--teal-dark);
}


.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* Corpo del testo: un passo più grande e in --ink invece di --ink-soft, che su crema dava
   4,62:1, appena sopra la soglia. Il colore è quello del testo principale del sito. */
.marchio-section .prose p,
.faq-item__a p {
  color: var(--ink);
  font-size: clamp(1.18rem, 1.55vw, 1.42rem);
  line-height: 1.65;
}

/* Testo a sinistra, immagini a destra. Su mobile una colonna sola: il testo è già primo nel DOM. */
.marchio-split {
  display: grid;
  margin-top: clamp(28px, 2.8vw, 40px);
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--marchio-aside, 400px));
  align-items: center;
  gap: clamp(40px, 4.4vw, 64px);
}

.marchio-split--stretta {
  --marchio-aside: 380px;
  align-items: start;
}

.marchio-ambiente {
  display: grid;
  gap: 16px;
}

/* Foto e blocco del nome in cornice: il filo oro con lo smusso di .hero__aside, costruito come
   .feature-photo — fondo colorato più un ::before a inset 1px. Un border verrebbe ritagliato
   dal clip-path (DESIGN-BRIEF §24, anti-pattern). */
.marchio-foto,
.marchio-segno {
  position: relative;
  margin: 0;
  background: rgba(69, 156, 175, 0.9);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.marchio-foto::before,
.marchio-segno::before {
  position: absolute;
  inset: 1px;
  background: var(--cream-deep);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  content: "";
}

/* 17/09/2026 — riquadro segnaposto: il filo esiste già (tecnica sopra), manca solo la scritta.
   Solo .marchio-foto: .marchio-segno porta sempre il marchio vero del brand, mai il segnaposto. */
.marchio-foto:has(img[src$="placeholder-di-nucci.png"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80'%3E%3Ctext x='110' y='34' text-anchor='middle' font-family='Times New Roman, Times, serif' font-size='30' font-weight='500' letter-spacing='3' fill='%23172a2e'%3EDI NUCCI%3C/text%3E%3Cline x1='28' y1='58' x2='56' y2='58' stroke='%23172a2e' stroke-width='1'/%3E%3Ctext x='110' y='62' text-anchor='middle' font-family='Times New Roman, Times, serif' font-size='11' letter-spacing='2' fill='%23172a2e'%3EGIOIELLERIA%3C/text%3E%3Cline x1='164' y1='58' x2='192' y2='58' stroke='%23172a2e' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60% auto;
  background-position: center;
  background-repeat: no-repeat;
}

.marchio-foto img {
  position: absolute;
  inset: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  object-fit: cover;
  object-position: center;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}

.marchio-foto--43 {
  aspect-ratio: 4 / 3;
}

.marchio-foto--21 {
  aspect-ratio: 2 / 1;
}

.marchio-foto--21 img {
  object-position: center 58%;
}

/* Nella hero la foto riempie la riga che le lascia la griglia, senza rapporto imposto */
.marchio-foto--hero {
  min-height: 0;
}

/* Le scritte non stanno in colonne strette: ogni blocco di testo riempie il contenitore che
   lo ospita — la .shell nelle sezioni, la larghezza del carosello nelle linee del catalogo. */
.marchio-heading,
.marchio-section .prose,
.catalog-intro,
.catalog-intro__description {
  max-width: none;
}

/* La FAQ è l'eccezione: colonna centrata e stretta, la riga di una domanda si legge in un colpo */
.faq-list {
  max-width: 720px;
  margin-inline: auto;
}

/* Le sei linee: niente copertina e niente selettore, il carosello prende tutta la larghezza.
   È la stessa dichiarazione che style.css applica sotto i 780px, qui valida a ogni larghezza. */
.catalog-exhibitor--brand {
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(20px, 2vw, 26px);
}

/* Titolo della linea a sinistra e, dove quella categoria ha una pagina sua, il rimando a destra
   sulla stessa linea di base. Su mobile il rimando va a capo sotto il titolo. */
.marchio-linea__intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 3vw, 48px);
}

.marchio-linea h2 {
  margin: 0;
}

.marchio-linea__rimando {
  flex: 0 1 auto;
}


/* Recensioni: badge e carosello della home, sotto il testo della sezione 4 */
.marchio-recensioni {
  margin-top: clamp(34px, 3vw, 44px);
}

.marchio-recensioni .story-review {
  margin-bottom: clamp(22px, 2.2vw, 32px);
}

/* Il badge nomina due fonti invece di una: i 650 px della home non bastano più */
.marchio-recensioni .story-review__link {
  width: min(100%, 820px);
}

/* Stacchi più corti della metrica delle fedi: questa pagina è una sequenza di blocchi di
   catalogo, e i 172 px fra una sezione e l'altra la allungavano senza darle respiro. */
.marchio-section,
.catalog-section {
  padding-block: clamp(40px, 3.6vw, 54px);
}

.page-section + .page-section.page-section--spaced {
  padding-top: clamp(40px, 3.6vw, 54px);
}

.catalog-intro {
  margin-bottom: clamp(26px, 2.6vw, 36px);
}

.catalog-list--brands {
  gap: clamp(34px, 3.4vw, 50px);
}

.faq-list {
  margin-top: clamp(26px, 2.6vw, 36px);
}

/* Link contestuale in uscita, dentro la prosa: vince sulla sottolineatura di .prose a */
/* Link contestuale in uscita. Dentro la prosa la coppia di classi batte la sottolineatura di .prose a */
.marchio-link,
.prose .marchio-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.marchio-link span {
  color: var(--gold-dark);
  font-size: 1rem;
  transition: transform 180ms ease;
}

.marchio-link:hover,
.marchio-link:focus-visible {
  color: var(--gold-dark);
}

.marchio-link:hover span,
.marchio-link:focus-visible span {
  transform: translate(3px, -3px);
}

/* Mobile: una colonna, i valori delle altre pagine interne */
@media (max-width: 780px) {
  .hero__aside {
    display: grid;
    grid-template-rows: 44px minmax(0, 1fr);
    gap: 10px;
  }

  .marchio-segno img {
    width: min(84%, 150px);
  }

  .marchio-fascia .finance-note {
    min-height: 60px;
  }

  .marchio-fascia .finance-note__text {
    font-size: 1.02rem;
  }

  .marchio-section .prose p,
  .faq-item__a p {
    font-size: 1.06rem;
    line-height: 1.55;
  }

  .marchio-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
}

/* Stemmi con rapporto largo — POLELLO (600×312) e OTTAVIANI (250×130), entrambi 1,92:1.
   Con `width: min(74%, 290px)` e altezza automatica diventano alti 151px e sbordano di 31px
   dalla riga da 120px che la hero riserva allo stemma. Miluna (484×178 → 107px) e UNOAERRE
   (245×60 → 71px) ci stanno dentro e non vanno toccati: per questo la regola sta su una classe
   a parte invece che sul selettore condiviso.
   `object-fit: contain` insieme al `max-height` serve a non schiacciare il logo: senza, l'altezza
   viene tagliata ma la larghezza resta, e la firma esce deformata.
   Il tetto è in pixel e non in percentuale: `max-height: 100%` su un'immagine dentro una riga di
   griglia non si risolve — il browser tratta l'altezza del contenitore come indefinita e la regola
   non fa presa (provato). I due valori sono gli stessi delle `grid-template-rows` di `.hero__aside`
   qui sopra: se cambiano lì, cambiano qui. */
.marchio-segno--largo img {
  max-height: 120px;
  object-fit: contain;
}

@media (max-width: 780px) {
  .marchio-segno--largo img {
    max-height: 44px;
  }
}

/* #miluna-sposa — corpo della sezione: due colonne (perle · argento), ognuna con due caroselli
   affiancati. Il titolo e il paragrafo dell'intestazione allargano per via del corpo sotto, più
   largo delle altre sezioni testo di questa pagina. Solo su questa sezione, solo su questa pagina. */
#miluna-sposa .section-heading--center {
  max-width: 1000px;
}

#miluna-sposa .section-heading--center > p:last-child {
  max-width: 860px;
}

.sposa-colonne {
  display: grid;
  margin-top: clamp(28px, 2.8vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
}

.sposa-colonna h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.31rem, 1.7vw, 1.5rem);
  text-transform: uppercase;
}

.sposa-colonna h3 em {
  color: var(--teal-dark);
}

.sposa-colonna p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.sposa-foto-coppia {
  display: flex;
  margin-top: clamp(28px, 2.8vw, 40px);
  gap: 14px;
}

/* Stessa scatola di .product-card figure — taglio, ombra, velo e logo — ma proporzione 3:4
   invece che quadrata: qui la foto non condivide la riga con nient'altro. */
.sposa-foto {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 22px rgba(22, 48, 54, 0.035);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* 17/09/2026 — riquadro segnaposto: cornice tratteggiata sul taglio, stessa tecnica di style.css
   (un border comune verrebbe ritagliato dall'angolo del clip-path). Sostituisce lì il bordo dritto
   di base perché qui il box è tagliato davvero. */
.sposa-foto:has(img[src$="placeholder-di-nucci.png"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 94.6,0 100,4 100,100 5.4,100 0,96' fill='none' stroke='%239e7b3f' stroke-width='0.33' stroke-dasharray='1 1.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80'%3E%3Ctext x='110' y='34' text-anchor='middle' font-family='Times New Roman, Times, serif' font-size='30' font-weight='500' letter-spacing='3' fill='%23172a2e'%3EDI NUCCI%3C/text%3E%3Cline x1='28' y1='58' x2='56' y2='58' stroke='%23172a2e' stroke-width='1'/%3E%3Ctext x='110' y='62' text-anchor='middle' font-family='Times New Roman, Times, serif' font-size='11' letter-spacing='2' fill='%23172a2e'%3EGIOIELLERIA%3C/text%3E%3Cline x1='164' y1='58' x2='192' y2='58' stroke='%23172a2e' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100% 100%, 62% auto;
  background-position: 0 0, center;
  background-repeat: no-repeat, no-repeat;
}

.sposa-foto::before {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 75%;
  background: linear-gradient(0deg, rgba(69, 156, 175, 0.17), rgba(69, 156, 175, 0) 48%);
  content: "";
  pointer-events: none;
}

.sposa-foto::after {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 13px;
  width: clamp(64px, 4.5vw, 78px);
  height: 29px;
  background: url("../images/logo-di-nucci-trasparente-nero.png") center / contain no-repeat;
  content: "";
  opacity: 0.58;
  pointer-events: none;
}

@media (max-width: 780px) {
  .sposa-colonne {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .sposa-colonna--argento {
    order: -1;
  }

  .sposa-foto-coppia {
    gap: 8px;
  }
}