/*
Theme Name: Associazione Atlantide
Theme URI: https://associazioneatlantide.it
Author: 2P WEB
Author URI: https://2pw.it
Description: Tema custom per l'Associazione Culturale Atlantide, Ente di Promozione Sociale dedicato alla valorizzazione del territorio sardo. Realizzato da 2P WEB.
Version: 1.17.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atlantide
Tags: custom, cultural-association, sardinia, custom-post-types, acf
*/

    /* =========================================================
       BECKAN - font display dei titoli (licenza commerciale acquistata)
       ========================================================= */
    @font-face {
      font-family: 'Beckan';
      src: url('./assets/fonts/Beckan.woff2') format('woff2'),
           url('./assets/fonts/Beckan.woff')  format('woff'),
           url('./assets/fonts/Beckan.otf')   format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    /* ===== DESIGN TOKENS — derived from Figma ===== */
    :root {
      /* Brand */
      --verde:      #194e44;   /* primary dark green — titoli, CTA, accenti */
      --verde-2:    #6f7541;   /* olive (Territorio + Pilastro 2) */
      --verde-2b:   #6f7441;
      --arancio:    #cc6d47;   /* terracotta/arancio (Formazione) */
      --viola:      #714c7a;   /* purple/malva (Eventi + Pilastro 1) */
      --marrone:    #40332d;   /* dark brown (card Sapori) */
      --ocra:       #ba8139;   /* gold/ocra (Pilastri bg + card Coltiviamo) */
      --sabbia:     #d3b296;   /* sand texture average */
      --sabbia-2:   #cfaf94;
      --bianco:     #ffffff;
      --nero:       #000000;
      --grigio-tag: #d9d9d9;

      /* Typography */
      --font-display: 'Beckan', 'DM Serif Display', Georgia, serif;
      --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

      /* Layout — Figma is 1920px wide */
      --container: 1280px;
      --container-wide: 1480px;
      --nav-h: 96px;
    }

    /* ===== RESET ===== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      color: var(--nero);
      background: var(--bianco);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    img, svg { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: 0; background: none; }

    /* ===== TYPOGRAPHY UTILITIES ===== */
    .display {
      font-family: var(--font-display);
      font-weight: 400;
      line-height: 0.95;
      letter-spacing: -0.005em;
      text-transform: uppercase;
    }
    .overline {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: clamp(13px, 1.04vw, 20px);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .body-strong {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: clamp(15px, 1.04vw, 20px);
      line-height: 1.55;
    }

    /* ===== NAV ===== */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: var(--nav-h);
      background-image: url('./assets/images/texture-sabbia.jpg');
      background-size: cover;
      background-position: center;
      background-color: var(--sabbia);
      box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    }
    .nav-inner {
      max-width: var(--container-wide);
      height: 100%;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .nav-logo img { height: 64px; width: auto; }
    .nav-menu {
      display: flex; align-items: center; gap: 36px;
      list-style: none;
    }
    .nav-menu a {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 18px;
      color: var(--bianco);
      transition: opacity .2s ease;
    }
    .nav-menu a:hover { opacity: .7; }
    .nav-cta {
      display: inline-flex; align-items: center;
      padding: 14px 32px;
      font-family: var(--font-body);
      font-weight: 500; font-size: 16px;
      color: var(--nero);
      background: var(--bianco);
      border: 1px solid var(--nero);
      border-radius: 999px;
      transition: background .2s ease, color .2s ease;
    }
    .nav-cta:hover { background: var(--nero); color: var(--bianco); }
    .nav-toggle {
      display: none;
      width: 44px; height: 44px;
      align-items: center; justify-content: center;
      color: var(--nero);
    }
    .nav-toggle ion-icon { font-size: 28px; }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      min-height: 800px;
      height: clamp(800px, 67vw, 1290px);
      padding-top: var(--nav-h);
      color: var(--bianco);
      overflow: hidden;
      isolation: isolate;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('./assets/images/hero-photo.jpg');
      background-size: cover;
      background-position: center 30%;
      z-index: -2;
    }
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.40) 35%,
        rgba(0,0,0,0.25) 70%,
        rgba(0,0,0,0.40) 100%
      );
      z-index: -1;
    }
    /* Sand wave at the bottom of hero, with the actual texture-sabbia.jpg
       filled into the SVG path (not a flat color). The SVG sits on top of the
       photo at the very bottom and curves naturally into chi-siamo. */
    .hero-wave {
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      width: 100%;
      height: 140px;
      z-index: 1;
      pointer-events: none;
      display: block;
    }
    .hero-wave path {
      /* The fill is a pattern referenced in the SVG <defs> */
    }
    .hero-inner {
      position: relative;
      height: 100%;
      max-width: 980px;
      padding: 0 32px;
      /* Figma: text starts at x=125 on 1920 width = ~6.5vw, capped at 125px on bigger screens */
      padding-left: clamp(24px, 6.5vw, 125px);
      padding-right: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 28px;
    }
    .hero .overline {
      color: var(--bianco);
      margin-bottom: 4px;
    }
    .hero h1 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(72px, 9vw, 160px);
      line-height: 0.92;
      letter-spacing: -0.01em;
      text-transform: uppercase;
    }
    .hero p.lead {
      max-width: 640px;
      font-weight: 700;
      font-size: clamp(15px, 1.04vw, 20px);
      line-height: 1.5;
    }
    .hero-actions {
      display: flex; gap: 16px; flex-wrap: wrap;
      margin-top: 8px;
    }

    /* Buttons (asymmetric corners — TR & BL rounded, per Figma r4=[0,48,0,48]) */
    .btn-asym {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 22px 38px;
      min-width: 260px;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-radius: 0 48px 0 48px;
      transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    }
    .btn-asym.btn-light {
      background: var(--bianco);
      color: var(--nero);
      border: 1px solid var(--bianco);
    }
    .btn-asym.btn-dark {
      background: var(--nero);
      color: var(--bianco);
      border: 1px solid var(--nero);
    }
    .btn-asym:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    }

    /* ===== CHI SIAMO ===== */
    .chi-siamo {
      position: relative;
      /* bottom padding includes 5.05vw (97px @1920) to give space for cosa-facciamo overlap */
      padding: 100px 32px calc(120px + 5.05vw);
      background-image: url('./assets/images/texture-sabbia.jpg');
      background-size: cover;
      background-position: center;
      background-color: var(--sabbia);
      text-align: center;
      overflow: hidden;
      z-index: 1;
    }
    .chi-siamo .inner {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .chi-siamo .overline { color: var(--nero); margin-bottom: 28px; }
    .chi-siamo h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(38px, 4.5vw, 70px);
      line-height: 1.05;
      color: var(--verde);
      text-transform: uppercase;
      max-width: 1041px;
      margin: 0 auto;
    }
    .chi-siamo .rosetta {
      width: clamp(110px, 8.1vw, 156px);
      height: auto;
      margin: 50px auto 50px;
      display: block;
    }
    .chi-siamo .body-strong {
      max-width: 902px;
      margin: 0 auto;
      font-weight: 700;
      color: var(--bianco);
      font-size: clamp(15px, 1.04vw, 20px);
      line-height: 1.5;
    }
    .chi-siamo .body-strong + .body-strong { margin-top: 26px; }

    /* NO DIAGONAL DIVIDER — Figma has a clean horizontal cut between
       chi-siamo and cosa-facciamo. The watermark logo creates the visual interest. */

    /* ===== COSA FACCIAMO =====
       Figma Container 3 (y=2148→3238, h=1090) overlaps Container 2 (chi-siamo, ends at y=2245)
       by exactly 97px. The green Rectangle 15 inside Container 3 is at y=2245→3239 (h=994),
       so the top 97px of the section are TRANSPARENT — the watermark logo (which starts
       at the same y=2148) protrudes into the chi-siamo's sand background.
       Translated to CSS: section margin-top: -5.05vw (= -97px on 1920),
       green ::before starts 5.05vw down, watermark sits at the very top. */
    .cosa-facciamo {
      position: relative;
      margin-top: -5.05vw;          /* 97/1920 — overlap Chi Siamo */
      padding: calc(5.05vw + 90px) 32px 0;  /* 97px transparent + 90px to overline */
      background: transparent;
      color: var(--bianco);
      overflow: visible;            /* allow watermark to extend above into chi-siamo sand */
      z-index: 2;                   /* above chi-siamo */
    }
    .cosa-facciamo::before {
      content: "";
      position: absolute;
      top: 5.05vw;                  /* green starts 97px below container top */
      left: 0; right: 0; bottom: 0;
      background: var(--verde);
      background-image: url('./assets/images/texture-verde.jpg');
      background-size: cover;
      background-position: center;
      z-index: -1;
    }
    .cosa-facciamo .inner {
      max-width: 1408px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .cosa-facciamo .overline { color: var(--bianco); margin-bottom: 24px; }
    .cosa-facciamo h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(36px, 4.6vw, 70px);
      line-height: 1;
      color: var(--bianco);
      text-transform: uppercase;
      white-space: nowrap;
      overflow: visible;
    }
    .cosa-facciamo .intro {
      max-width: 780px;
      margin: 32px auto 0;
      color: var(--bianco);
    }

    /* WATERMARK — Figma exact:
       pos x=1322 (1322/1920 = 68.85% from left)
       pos y=2148 (= cosa-facciamo container top, i.e. top:0)
       size 932x943 (width 932/1920 = 48.55vw)
       rotation -0.58° (almost zero — barely tilted)
       Image extends 334px past 1920 frame edge → cropped on right by overflow:hidden
       Source PNG already has white art on transparent bg, no filter needed. */
    .cosa-facciamo .watermark {
      position: absolute;
      top: 0;                       /* = container top, sits 97px above the green bg */
      left: 68.85%;                 /* 1322/1920 */
      width: 48.55vw;               /* 932/1920 */
      height: auto;
      transform: rotate(-0.58deg);
      transform-origin: top left;
      opacity: 0.4;
      pointer-events: none;
      z-index: 0;
      user-select: none;
    }

    /* Arch cards — Figma: 385x548 each, gap 135px on 1920 frame
       Internal: icon top=31px, icon=226x226 (58.7% width),
       icon→title 0gap, title 60px tall, gap 48px, body 183px to bottom edge. */
    .arch-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      /* 135/385 = 35% gap relative to card width = ~7% of total. Use 36px ≈ figma feel */
      gap: clamp(20px, 7vw, 135px);
      max-width: 1408px;        /* 1408 = 3*385 + 2*135 wide on 1920 = ~73% */
      margin: 60px auto 0;
      padding-bottom: 90px;
      position: relative;
      z-index: 1;
    }
    .arch-card {
      position: relative;
      aspect-ratio: 385 / 548;
      border-radius: 50% 50% 0 0 / 35% 35% 0 0; /* 192/385 ≈ 50% */
      padding: 5.7% 6% 0;       /* top 31/548 = 5.7%, sides ~6% */
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      color: var(--bianco);
      overflow: hidden;
      isolation: isolate;
    }
    .arch-card::before {
      content: "";
      position: absolute; inset: 0;
      background-size: cover;
      background-position: center;
      z-index: -2;
    }
    .arch-card.formazione::before { background-image: url('./assets/images/texture-arancio.jpg'); background-color: var(--arancio); }
    .arch-card.eventi::before     { background-image: url('./assets/images/texture-viola.jpg');   background-color: var(--viola); }
    .arch-card.territorio::before { background-image: url('./assets/images/texture-olive.jpg');   background-color: var(--verde-2); }

    .arch-card .icon {
      width: 58.7%;             /* 226/385 */
      height: auto;
      aspect-ratio: 1;
      margin-bottom: 0;         /* Figma: icon ends exactly where title starts */
      filter: brightness(0) invert(1); /* solid white */
    }
    .arch-card h3 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(24px, 2.6vw, 40px);
      line-height: 1;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      margin-bottom: 8.8%;       /* 48/548 = ~8.8% of card height for next gap */
    }
    .arch-card p {
      font-weight: 700;
      font-size: clamp(13px, 1vw, 18px);
      line-height: 1.5;
      max-width: 90%;
      margin-bottom: 0;          /* Figma: body text ends at card bottom edge */
    }

    /* ===== PROGETTI ===== */
    .progetti {
      position: relative;
      padding: 110px 32px 90px;
      background-image: url('./assets/images/texture-sabbia.jpg');
      background-size: cover;
      background-position: center;
      background-color: var(--sabbia);
      text-align: center;
      overflow: hidden;
    }
    .progetti .inner { max-width: var(--container); margin: 0 auto; }
    .progetti .overline { color: var(--bianco); margin-bottom: 22px; }
    .progetti h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(40px, 4.6vw, 70px);
      line-height: 1;
      color: var(--verde);
      text-transform: uppercase;
    }
    .progetti .intro {
      max-width: 760px;
      margin: 28px auto 80px;
      color: var(--bianco);
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 36px;
      max-width: 1380px;
      margin: 0 auto;
    }
    /* PROJECT CARD — circle protrudes ABOVE the colored panel.
       In Figma: card 436x518 with bottom corners r=45;
       white circle 438x438 centered at card's TOP edge.
       => wrapper padding-top = 50% of width (= half circle height)
          panel padding-top = 50% + gap (pushes content below circle bottom). */
    .project-card {
      position: relative;
      padding-top: 50%;            /* reserves the top-half-circle protrusion */
    }
    .project-card .ring {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: var(--bianco);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 24px rgba(0,0,0,0.08);
      z-index: 2;
    }
    .project-card .ring img {
      width: 78%;
      height: auto;
      object-fit: contain;
    }
    .project-card .panel {
      position: relative;
      /* TOP padding = 50% (clears the in-card half of the circle) + 38px gap.
         Side padding 40/436 = 9.17% to match Figma (chip at x=266 in card x=226 → 40px from left). */
      padding: calc(50% + 38px) 9.17% 56px;
      border-radius: 0 0 45px 45px;
      color: var(--bianco);
      text-align: left;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      overflow: hidden;
      isolation: isolate;
    }
    .project-card .panel::before {
      content: "";
      position: absolute; inset: 0; z-index: -1;
      background-size: cover;
      background-position: center;
    }
    .project-card.cultura       .panel::before { background-image: url('./assets/images/texture-verde.jpg');   background-color: var(--verde); }
    .project-card.territorio    .panel::before { background-image: url('./assets/images/texture-marrone.jpg'); background-color: var(--marrone); }
    .project-card.sostenibilita .panel::before { background-image: url('./assets/images/texture-ocra.jpg');    background-color: var(--ocra); }

    /* Tag — Figma: bianco semi-trasparente (~37% opacity), testo bianco.
       In Figma data is shown as "#d9d9d9" but visually it's white-on-card-blend.
       CULTURA = 193x57, TERRITORIO = 216x57, SOSTENIBILITÀ = 265x57.
       Text size 20/700, color white, r=8 */
    .project-tag {
      display: inline-block;
      background: rgba(255, 255, 255, 0.37);
      color: var(--bianco);
      font-family: var(--font-body);
      font-weight: 700;
      font-size: clamp(15px, 1.04vw, 20px);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 14px 26px;
      border-radius: 8px;
    }
    .project-card .panel p {
      max-width: 100%;
      font-weight: 700;
      font-size: clamp(14px, 0.94vw, 18px);
      line-height: 1.5;
      text-align: left;
    }

    /* ===== PILASTRI ===== */
    .pilastri {
      position: relative;
      padding: 90px 0 90px;        /* no horizontal padding — cards go edge-to-edge */
      background-image: url('./assets/images/texture-ocra.jpg');
      background-size: cover;
      background-position: center;
      background-color: var(--ocra);
      color: var(--bianco);
      text-align: center;
      overflow: hidden;
    }
    .pilastri .inner {
      max-width: 100%;             /* let .pilastri-grid go full-bleed */
      margin: 0 auto;
      padding: 0 32px;             /* keep title centered with normal padding */
    }
    .pilastri .overline { color: var(--bianco); margin-bottom: 22px; }
    .pilastri h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(40px, 4.6vw, 70px);
      line-height: 1;
      color: var(--bianco);
      text-transform: uppercase;
    }

    /* Pilastri grid: cards reach the page edges with a small center gap.
       Figma: p1 starts at x=-28 (off-screen left), p2 ends at x=1948 (off-screen right),
       gap between cards = 56px (988-932). Card width 960 = 50% on 1920.
       To replicate: each card is 50% - half_gap wide, no horizontal padding on .pilastri. */
    .pilastri-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(20px, 3vw, 56px);
      max-width: 100%;
      margin: 70px 0 0;            /* reset side margins, no auto */
      padding: 0;
    }
    .pilastro-card {
      position: relative;
      padding: 60px clamp(40px, 7vw, 134px) 80px;
      min-height: 460px;
      color: var(--bianco);
      text-align: left;
      overflow: hidden;
      isolation: isolate;
      display: flex;
      flex-direction: column;
    }
    .pilastro-card::before {
      content: "";
      position: absolute; inset: 0; z-index: -1;
      background-size: cover;
      background-position: center;
    }
    /* P1 (viola, left): rounded only on bottom-right corner.
       Figma r4=[0,0,261,0] = top-left:0, top-right:0, bottom-right:261, bottom-left:0 */
    .pilastro-card.p1 {
      border-radius: 0 0 261px 0;
    }
    .pilastro-card.p1::before {
      background-image: url('./assets/images/texture-viola.jpg');
      background-color: var(--viola);
    }
    /* P2 (verde olive, right): in Figma it's rotated 180° → effectively
       only the TOP-LEFT corner is rounded. The content visually sits to the
       right side of the card (the rounded corner pushes content away). */
    .pilastro-card.p2 {
      border-radius: 261px 0 0 0;
      text-align: center;
      align-items: center;
    }
    .pilastro-card.p2::before {
      background-image: url('./assets/images/texture-olive2.jpg');
      background-color: var(--verde-2b);
      transform: scale(-1, -1);    /* mirror texture to match Figma's 180° rotation */
    }
    .pilastro-card.p2 .pilastro-num {
      align-self: flex-end;        /* 02 in upper right area like Figma */
    }
    .pilastro-card.p2 h3,
    .pilastro-card.p2 p {
      text-align: center;
      max-width: 460px;
    }

    .pilastro-num {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(80px, 7.5vw, 120px);
      line-height: 1;
      margin-bottom: 40px;
    }
    .pilastro-card h3 {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: clamp(22px, 1.8vw, 30px);
      line-height: 1.15;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 28px;
      max-width: 480px;
    }
    .pilastro-card p {
      font-weight: 700;
      font-size: 17px;
      line-height: 1.6;
      max-width: 540px;
    }

    /* ===== CONTATTI ===== */
    .contatti {
      padding: 110px 32px 100px;
      background: #FAF8F4;
      text-align: center;
    }
    .contatti .inner { max-width: var(--container); margin: 0 auto; }
    /* Overline "CONTATTI" — Figma: dark green #194e44 */
    .contatti .overline { color: var(--verde); margin-bottom: 18px; }
    /* Title "COLLABORA CON NOI" — Figma sample: ocra/oro #ae722a (matches --ocra) */
    .contatti h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(40px, 4.6vw, 70px);
      line-height: 1;
      color: var(--ocra);
      text-transform: uppercase;
    }
    .contatti .subtitle {
      max-width: 640px;
      margin: 22px auto 60px;
      color: #555;
      font-weight: 500;
      font-size: 17px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }
    .contact-card {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 20px;
      align-items: center;
      background: var(--bianco);
      border: 1px solid #EAE6DE;
      border-radius: 14px;
      padding: 22px 28px;
      text-align: left;
    }
    .contact-card .ico {
      width: 56px; height: 56px;
      background: rgba(25,78,68,0.08);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      color: var(--verde);
    }
    .contact-card .ico ion-icon { font-size: 28px; }
    .contact-card h4 {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 17px;
      color: var(--nero);
      margin-bottom: 4px;
    }
    .contact-card p, .contact-card a {
      color: var(--verde);
      font-weight: 500;
      font-size: 15px;
      line-height: 1.4;
    }
    .contact-card.social-card .socials {
      display: flex; gap: 10px;
    }
    .contact-card.social-card .socials a {
      width: 40px; height: 40px;
      background: rgba(25,78,68,0.08);
      color: var(--verde);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: background .2s ease, color .2s ease;
    }
    .contact-card.social-card .socials a:hover {
      background: var(--verde); color: var(--bianco);
    }
    .contact-card.social-card .socials ion-icon { font-size: 18px; }

    .contact-extras {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 60px;
    }
    .extra-card {
      background: var(--bianco);
      border: 1px solid #EAE6DE;
      border-radius: 14px;
      padding: 28px 22px;
      text-align: center;
    }
    .extra-card .ico {
      width: 52px; height: 52px;
      margin: 0 auto 14px;
      color: var(--verde);
      display: flex; align-items: center; justify-content: center;
    }
    .extra-card .ico ion-icon { font-size: 32px; }
    .extra-card h4 {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 16px;
      color: var(--nero);
      margin-bottom: 6px;
    }
    .extra-card p {
      font-size: 14px; color: #6B6560; line-height: 1.45;
    }

    /* CTA "Scopri le attività" — Figma: asymmetric corners
       Same pattern as hero buttons: r4=[0, 48, 0, 48]
       (top-left:0, top-right:48, bottom-right:0, bottom-left:48) */
    .contatti .cta {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 22px 56px;
      background: var(--verde);
      color: var(--bianco);
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: 0 48px 0 48px;
      transition: transform .2s ease, background .2s ease;
    }
    .contatti .cta:hover { transform: translateY(-2px); background: #0f3b33; }

    /* ===== FOOTER ===== */
    .footer {
      background: #0c2a25;
      color: rgba(255,255,255,0.72);
      padding: 90px 32px 30px;
    }
    .footer-inner {
      max-width: var(--container);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 50px;
      align-items: start;
    }
    .footer-brand img {
      width: 180px; height: auto;
      filter: brightness(0) invert(1);
      margin-bottom: 22px;
    }
    .footer-brand .tagline {
      font-family: var(--font-body);
      font-style: italic;
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      margin-bottom: 12px;
    }
    .footer-brand p { font-size: 14px; line-height: 1.7; }
    .footer-col h5 {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ocra);
      margin-bottom: 22px;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .footer-col a {
      font-size: 15px;
      color: rgba(255,255,255,0.78);
      transition: color .2s ease;
    }
    .footer-col a:hover { color: var(--bianco); }
    .footer-socials {
      display: flex; gap: 10px; margin-top: 22px;
    }
    .footer-socials a {
      width: 40px; height: 40px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.85);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: background .2s ease, color .2s ease;
    }
    .footer-socials a:hover { background: var(--ocra); color: var(--bianco); }
    .footer-socials ion-icon { font-size: 18px; }
    .footer-copy {
      max-width: var(--container);
      margin: 60px auto 0;
      padding-top: 26px;
      border-top: 1px solid rgba(255,255,255,0.08);
      font-size: 13px;
      color: rgba(255,255,255,0.45);
      text-align: center;
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 1100px) {
      .nav-menu { gap: 22px; }
      .nav-menu a { font-size: 16px; }
      .arch-grid { grid-template-columns: 1fr; gap: 28px; max-width: 480px; }
      .arch-card { aspect-ratio: 16 / 13; padding: 60px 32px; border-radius: 240px 240px 0 0; }
      .projects-grid { grid-template-columns: 1fr; gap: 60px; max-width: 460px; }
      .pilastri-grid { grid-template-columns: 1fr; gap: 28px; }
      .pilastro-card { padding: 48px 40px 64px; min-height: 360px; border-radius: 0 0 180px 0; }
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
      .contact-extras { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 760px) {
      :root { --nav-h: 76px; }
      .nav-inner { padding: 0 18px; }
      .nav-logo img { height: 50px; }
      .nav-menu, .nav-cta { display: none; }
      .nav-toggle { display: flex; }
      .nav.open .nav-menu {
        display: flex;
        position: absolute; top: var(--nav-h); left: 0; right: 0;
        flex-direction: column;
        background: var(--sabbia);
        background-image: url('./assets/images/texture-sabbia.jpg');
        background-size: cover;
        padding: 24px;
        gap: 18px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.1);
      }
      .nav.open .nav-cta { display: inline-flex; margin: 8px 24px 24px; }

      .hero { min-height: 640px; height: auto; padding: 130px 0 90px; }
      .hero-inner { padding: 0 22px; gap: 22px; margin: 0 auto; }
      .hero h1 { font-size: clamp(56px, 13vw, 80px); }
      .hero-actions { flex-direction: column; }
      .btn-asym { width: 100%; min-width: 0; padding: 18px 28px; font-size: 15px; }

      .chi-siamo { padding: 70px 22px 0; }
      .chi-siamo .inner { padding-bottom: 90px; }
      .chi-siamo .rosetta { width: 110px; height: 110px; margin: 32px auto 28px; }

      .cosa-facciamo { padding: 70px 22px 0; }
      .cosa-facciamo .watermark { display: none; }
      .arch-grid { padding-bottom: 70px; margin-top: 44px; }

      .progetti { padding: 80px 22px 70px; }
      .progetti .intro { margin-bottom: 60px; }

      .pilastri { padding: 70px 0 90px; }
      .pilastro-card { padding: 40px 30px 56px; min-height: 320px; border-radius: 0 0 140px 0; }

      .contatti { padding: 80px 22px 70px; }
      .contact-grid { grid-template-columns: 1fr; }
      .contact-extras { grid-template-columns: 1fr 1fr; }

      .footer { padding: 70px 22px 24px; }
      .footer-inner { grid-template-columns: 1fr; gap: 36px; }
    }

/* ==========================================================================
   FASE 2 — Componenti riusabili (v1.2.0+)
   ========================================================================== */

/* --- variabile altezza nav per offset reading-progress / sticky -------- */
:root {
	--nav-h: 92px;
}
@media (max-width: 900px) {
	:root { --nav-h: 76px; }
}

/* --- Hero compatto pagine interne (v1.12.0 — ingrandito + più drammatico) - */
/*
 * NOTA: la classe `.hero-inner` esisteva già in FASE 1 come wrapper interno
 * dell'hero della home (max-width 980px + flex). Quando applichiamo
 * `.hero.hero-inner` alla <section> stessa, dobbiamo resettare quei vincoli
 * altrimenti la section si restringe a 980px sulla sinistra. Fix v1.12.1.
 */
.hero.hero-inner {
	min-height: 560px;
	height: auto;
	max-width: none !important;
	padding: 0 !important;
	display: block !important;
	width: 100%;
}
.hero.hero-inner .hero-bg {
	transform: scale(1.02); /* respiro per non vedere bordi su parallax */
	filter: saturate(0.95);
}
.hero.hero-inner .hero-overlay {
	background:
		linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 55%, rgba(25,78,68,0.85) 100%),
		radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%);
}
.hero-inner-wrap {
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto;
	padding: 180px 32px 110px;
	color: #fff;
	text-align: center;
}
.hero-inner-wrap .overline {
	display: inline-block;
	color: #fff;
	margin-bottom: 26px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
	opacity: 0.95;
	padding: 6px 16px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.hero-inner-wrap h1 {
	font-family: 'Beckan', serif;
	font-size: clamp(56px, 9vw, 124px);
	line-height: 1;
	color: #fff;
	margin: 0 0 26px;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.hero-inner-wrap .lead {
	font-family: 'Inter', sans-serif;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.55;
	color: rgba(255,255,255,0.95);
	max-width: 760px;
	margin: 0 auto;
	font-weight: 400;
	text-shadow: 0 1px 14px rgba(0,0,0,0.25);
}
.hero-inner-icon {
	position: absolute;
	top: 90px;
	right: 60px;
	width: 220px;
	height: auto;
	opacity: 0.18;
	pointer-events: none;
	z-index: 1;
}
.hero-inner-extra {
	margin: 0 auto 26px;
}
.hero.hero-inner .atl-breadcrumb {
	margin-bottom: 26px;
	font-size: 14px;
}
.hero.hero-inner .atl-breadcrumb a {
	color: rgba(255,255,255,0.92);
	text-decoration: none;
}
@media (max-width: 900px) {
	.hero.hero-inner { min-height: 460px; }
	.hero-inner-wrap { padding: 130px 22px 80px; }
	.hero-inner-icon { display: none; }
}
@media (max-width: 500px) {
	.hero-inner-wrap { padding: 110px 20px 70px; }
	.hero-inner-wrap h1 { font-size: clamp(44px, 12vw, 60px); }
	.hero-inner-wrap .overline { font-size: 12px; padding: 5px 12px; }
}

/* --- Breadcrumb ----------------------------------------------------------- */
.atl-breadcrumb {
	margin-bottom: 18px;
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	font-family: 'Inter', sans-serif;
}
.atl-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
.atl-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.atl-breadcrumb a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.atl-breadcrumb a:hover {
	border-bottom-color: rgba(255,255,255,0.7);
}
.atl-breadcrumb-sep {
	opacity: 0.6;
	font-weight: 600;
}
.atl-breadcrumb [aria-current="page"] {
	font-weight: 600;
	color: #fff;
}
/* Variante "su sabbia" (breadcrumb sopra sezioni chiare) */
.atl-breadcrumb--sand {
	color: #194e44;
	background: var(--sabbia, #d3b296);
	padding: 10px 20px;
	border-radius: 999px;
	display: inline-block;
}
.atl-breadcrumb--sand a:hover {
	border-bottom-color: #194e44;
}

/* --- Reading progress bar ------------------------------------------------- */
.atl-reading-progress {
	position: fixed;
	top: var(--nav-h);
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(0,0,0,0.06);
	z-index: 90;
	pointer-events: none;
}
.atl-reading-progress-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #194e44, #ba8139);
	transition: width 0.05s linear;
	will-change: width;
}
@media (prefers-reduced-motion: reduce) {
	.atl-reading-progress-fill { transition: none; }
}

/* --- Share buttons -------------------------------------------------------- */
.atl-share {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}
.atl-share-label {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #777;
	font-weight: 600;
	writing-mode: horizontal-tb;
}
.atl-share ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 10px;
}
.atl-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #fff;
	border: 1px solid #e0e4e1;
	border-radius: 50%;
	color: #194e44;
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
	font-size: 20px;
	text-decoration: none;
}
.atl-share-btn ion-icon {
	font-size: 20px;
}
.atl-share-btn:hover,
.atl-share-btn:focus-visible {
	background: #194e44;
	color: #fff;
	border-color: #194e44;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(25,78,68,0.25);
	outline: none;
}
.atl-share-toast {
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	background: #194e44;
	color: #fff;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-family: 'Inter', sans-serif;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.atl-share-toast::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	background: #194e44;
}
/* Sticky desktop ≥1100px */
@media (min-width: 1100px) {
	.atl-share--sticky {
		position: sticky;
		top: calc(var(--nav-h) + 24px);
		float: left;
		margin-left: -90px;
		margin-right: 30px;
		margin-top: 4px;
	}
}
@media (max-width: 1099px) {
	.atl-share {
		flex-direction: row;
		justify-content: center;
		margin: 32px 0;
	}
	.atl-share ul {
		flex-direction: row;
	}
	.atl-share-toast {
		left: 50%;
		top: -40px;
		transform: translateX(-50%);
	}
	.atl-share-toast::before {
		left: 50%;
		top: 100%;
		transform: translateX(-50%) rotate(45deg);
	}
}

/* --- Related posts -------------------------------------------------------- */
.atl-related {
	background: var(--sabbia, #d3b296);
	background-image: url('./assets/images/texture-sabbia.jpg');
	background-size: cover;
	padding: 80px 0 100px;
	position: relative;
}
.atl-related .inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}
.atl-related-title {
	font-family: 'Beckan', serif;
	font-size: clamp(36px, 5vw, 56px);
	color: #194e44;
	margin: 0 0 48px;
	text-align: center;
	font-weight: 400;
}
.atl-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.atl-related-card {
	background: #fff;
	border-radius: 8px 28px 8px 28px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0,0,0,0.06);
	transition: transform 0.3s, box-shadow 0.3s;
	position: relative;
}
.atl-related-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 38px rgba(25,78,68,0.18);
}
.atl-related-link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.atl-related-thumb {
	aspect-ratio: 4/3;
	overflow: hidden;
	background: #f0ede6;
}
.atl-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.atl-related-card:hover .atl-related-thumb img {
	transform: scale(1.06);
}
.atl-related-body {
	padding: 22px 22px 26px;
}
.atl-related-tag {
	display: inline-block;
	background: #194e44;
	color: #fff;
	font-size: 10px;
	letter-spacing: 0.18em;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 12px;
	text-transform: uppercase;
}
.atl-related-h {
	font-family: 'Beckan', serif;
	font-size: 26px;
	line-height: 1.15;
	color: #194e44;
	margin: 0 0 10px;
	font-weight: 400;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.atl-related-excerpt {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #555;
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.atl-related-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ba8139;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.atl-related-arrow ion-icon {
	font-size: 16px;
	transition: transform 0.2s;
}
.atl-related-card:hover .atl-related-arrow ion-icon {
	transform: translateX(4px);
}
@media (max-width: 900px) {
	.atl-related-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.atl-related { padding: 60px 0 70px; }
}
@media (min-width: 600px) and (max-width: 900px) {
	.atl-related-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Variante "project": riusa il markup .project-card della home (ring + panel)
   per avere card identiche allo stile home in "Altri progetti". */
.atl-related--project .projects-grid.atl-related-grid-project {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 0;
}
.atl-related--project .project-card {
	margin: 0; /* override eventuale margin dalla home */
}
@media (max-width: 1100px) {
	.atl-related--project .projects-grid.atl-related-grid-project {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 700px) {
	.atl-related--project .projects-grid.atl-related-grid-project {
		grid-template-columns: 1fr;
	}
}

/* FIX v1.14.2 — img dentro .ring deve essere centrata anche quando avvolta
   da <a> (in FASE 2 abbiamo aggiunto <a> per renderla cliccabile, ma l'<a>
   inline rompeva il flex centering definito su .ring). */
.project-card .ring a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	border-radius: 50%;  /* eredita la forma del ring per hover area pulita */
}
.project-card .ring a img {
	width: 78%;
	height: auto;
	max-height: 78%;
	object-fit: contain;
	display: block;
}

/* v1.15.0 — Carousel progetti home: la slide ospita una .project-card.
   Width fissa per slide (~340px) così il carousel mostra ~3 card a desktop
   e ~1.2 a mobile (effetto peek che invita a scrollare). */
.atl-carousel--projects {
	margin-top: 50px;
}
.atl-carousel--projects .atl-carousel-track {
	gap: 28px;
	padding: 4px 0 36px;
}
.atl-carousel--projects .atl-carousel-slide {
	flex: 0 0 340px;
	scroll-snap-align: start;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}
.atl-carousel--projects .atl-carousel-slide .project-card {
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.atl-carousel--projects .atl-carousel-slide .project-card .panel {
	flex: 1 1 auto;
}
.atl-carousel--projects .atl-carousel-slide .project-card .panel p {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Counter posizionato sotto, non assoluto sopra le card */
.atl-carousel--projects .atl-carousel-counter {
	position: static;
	transform: none;
	display: inline-block;
	margin-top: 14px;
}
/* Nav buttons più visibili sul sand bg sezione progetti */
.atl-carousel--projects .atl-carousel-nav {
	background: #194e44;
	color: #fff;
	border-color: #194e44;
}
.atl-carousel--projects .atl-carousel-nav:hover,
.atl-carousel--projects .atl-carousel-nav:focus-visible {
	background: #0f3b33;
	border-color: #0f3b33;
}
@media (max-width: 700px) {
	.atl-carousel--projects .atl-carousel-slide {
		flex-basis: 82vw;
	}
}

/* FIX v1.14.3 — Card progetto dentro archive + related: altezza uniforme.
   Grid stretcha i child in altezza (default), ma .project-card non aveva
   display flex, quindi il .panel cresceva solo quanto il contenuto.
   Forzando flex column + flex-grow sul panel, le card riempiono la cella
   grid e mantengono altezza uguale tra loro. Plus excerpt clamp di sicurezza. */
.atl-archive-progetti .projects-grid > .project-card,
.atl-related--project .projects-grid > .project-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.atl-archive-progetti .project-card .panel,
.atl-related--project .project-card .panel {
	flex: 1 1 auto;
}
.atl-archive-progetti .project-card .panel p,
.atl-related--project .project-card .panel p {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- CTA block fine articolo --------------------------------------------- */
.atl-cta-block {
	background: #194e44;
	background-image: url('./assets/images/texture-verde.jpg');
	background-size: cover;
	padding: 80px 0;
	color: #fff;
}
.atl-cta-block .inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}
.atl-cta-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.18);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 14px 48px 14px 48px;
	padding: 48px 56px;
}
.atl-cta-text {
	flex: 1 1 400px;
}
.atl-cta-text h2 {
	font-family: 'Beckan', serif;
	font-size: clamp(32px, 4vw, 48px);
	color: #fff;
	margin: 0 0 14px;
	font-weight: 400;
	line-height: 1.1;
}
.atl-cta-text p {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255,255,255,0.92);
	margin: 0;
}
.atl-cta-card .btn-asym {
	flex: 0 0 auto;
}
@media (max-width: 700px) {
	.atl-cta-card {
		padding: 36px 28px;
		flex-direction: column;
		align-items: flex-start;
	}
	.atl-cta-card .btn-asym {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   FASE 2 — Blocchi flexible content (v1.5.0+)
   Container: .atl-single-content (inside <article> single)
   Stack:     .atl-block-stack
   ========================================================================== */
.atl-single-content {
	max-width: 880px;
	margin: 0 auto;
	padding: 80px 32px 60px;
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 1.75;
	color: #1f2424;
}
.atl-single-content h2 {
	font-family: 'Beckan', serif;
	font-size: clamp(40px, 4.6vw, 56px);
	color: #194e44;
	margin: 70px 0 28px;
	font-weight: 400;
	line-height: 1.08;
}
.atl-single-content h3 {
	font-family: 'Beckan', serif;
	font-size: clamp(28px, 3vw, 36px);
	color: #ba8139;
	margin: 50px 0 18px;
	font-weight: 400;
	line-height: 1.15;
}
.atl-single-content p { margin: 0 0 1.4em; }
.atl-single-content > p:first-child {
	font-size: clamp(22px, 2.2vw, 26px);
	line-height: 1.55;
	color: #194e44;
	font-weight: 500;
	margin-bottom: 1.2em;
}
.atl-single-content a:not(.btn-asym) {
	color: #194e44;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	transition: text-decoration-thickness 0.2s;
}
.atl-single-content a:not(.btn-asym):hover {
	text-decoration-thickness: 3.5px;
}
.atl-single-content ul,
.atl-single-content ol {
	margin: 0 0 1.4em 1.6em;
	padding: 0;
}
.atl-single-content li { margin: 0.5em 0; }
.atl-single-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 32px 0;
}
.atl-single-content strong { color: #0f3b33; font-weight: 700; }

.atl-block-stack {
	max-width: 880px;
	margin: 0 auto;
	padding: 80px 32px 60px;
}
.atl-block-stack > .atl-block {
	margin-bottom: 64px;
}
.atl-block-stack > .atl-block:last-child {
	margin-bottom: 0;
}
.atl-block-title {
	font-family: 'Beckan', serif;
	font-size: clamp(30px, 3.4vw, 42px);
	color: #194e44;
	margin: 0 0 28px;
	font-weight: 400;
	line-height: 1.1;
}

/* --- Block: testo (eredita gli stili di .atl-single-content via DOM) ----- */
.atl-block-stack .atl-block-testo {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 1.75;
	color: #1f2424;
}
.atl-block-stack .atl-block-testo h2 {
	font-family: 'Beckan', serif;
	font-size: clamp(40px, 4.6vw, 56px);
	color: #194e44;
	margin: 50px 0 22px;
	font-weight: 400;
	line-height: 1.08;
}
.atl-block-stack .atl-block-testo h3 {
	font-family: 'Beckan', serif;
	font-size: clamp(28px, 3vw, 36px);
	color: #ba8139;
	margin: 38px 0 16px;
	font-weight: 400;
}
.atl-block-stack .atl-block-testo a {
	color: #194e44;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	transition: text-decoration-thickness 0.2s;
}
.atl-block-stack .atl-block-testo a:hover {
	text-decoration-thickness: 3.5px;
}
.atl-block-stack .atl-block-testo p { margin: 0 0 1.4em; }
.atl-block-stack .atl-block-testo strong { color: #0f3b33; font-weight: 700; }
.atl-block-stack .atl-block-testo img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 28px 0;
}

/* --- Block: gallery (grid) ---------------------------------------------- */
.atl-block-gallery .atl-gallery-grid {
	display: grid;
	gap: 8px;
}
.atl-gallery-grid-3 .atl-gallery-grid { grid-template-columns: repeat(3, 1fr); }
.atl-gallery-grid-4 .atl-gallery-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.atl-gallery-grid-3 .atl-gallery-grid,
	.atl-gallery-grid-4 .atl-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
	.atl-gallery-grid-3 .atl-gallery-grid,
	.atl-gallery-grid-4 .atl-gallery-grid { grid-template-columns: 1fr; }
}
.atl-gallery-item {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #f0ede6;
	aspect-ratio: 1;
	position: relative;
}
.atl-gallery-item img,
.atl-gallery-item .atl-gallery-img-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.3s ease;
}
.atl-gallery-img-btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: zoom-in;
}
.atl-gallery-img-btn:disabled,
.atl-gallery-img-btn[disabled] {
	cursor: default;
}
.atl-gallery-item:hover img,
.atl-gallery-img-btn:hover img,
.atl-gallery-img-btn:focus-visible img {
	transform: scale(1.04);
	filter: brightness(0.92);
}
.atl-gallery-item figcaption {
	font-size: 12px;
	color: #777;
	padding: 8px 4px 0;
	font-family: 'Inter', sans-serif;
}

/* --- Block: gallery (masonry via CSS columns) ---------------------------- */
.atl-gallery-masonry .atl-gallery-grid {
	column-count: 3;
	column-gap: 8px;
	display: block;
}
.atl-gallery-masonry .atl-gallery-item {
	aspect-ratio: auto;
	break-inside: avoid;
	margin: 0 0 8px;
	display: block;
}
.atl-gallery-masonry .atl-gallery-item img {
	height: auto;
	aspect-ratio: auto;
}
@media (max-width: 900px) { .atl-gallery-masonry .atl-gallery-grid { column-count: 2; } }
@media (max-width: 500px) { .atl-gallery-masonry .atl-gallery-grid { column-count: 1; } }

/* --- Block: gallery carousel premium ------------------------------------ */
.atl-carousel {
	position: relative;
	overflow: visible; /* v1.16.2 — frecce posizionate FUORI dal track */
}
.atl-carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 0 24px;
	border-radius: 8px; /* clip slide ai bordi del track senza nascondere le nav fuori */
}
.atl-carousel-track::-webkit-scrollbar { display: none; }
.atl-carousel-slide {
	flex: 0 0 min(80vw, 900px);
	scroll-snap-align: center;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #f0ede6;
}
.atl-carousel-slide .atl-gallery-img-btn,
.atl-carousel-slide img {
	width: 100%;
	height: auto;
	display: block;
}
.atl-carousel-slide figcaption {
	font-size: 13px;
	color: #777;
	padding: 8px 12px;
	background: #fff;
}
.atl-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	border-radius: 12px 4px 12px 4px;
	background: rgba(255,255,255,0.94);
	border: 1px solid rgba(0,0,0,0.08);
	color: #194e44;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	z-index: 5;
	transition: all 0.2s;
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.atl-carousel-nav ion-icon { font-size: 24px; }
.atl-carousel-nav:hover,
.atl-carousel-nav:focus-visible {
	background: #194e44;
	color: #fff;
	transform: translateY(-50%) scale(1.05);
	outline: none;
}
/* v1.16.2 — frecce posizionate fuori dal container del carousel.
   Su viewport stretti restano dentro per non uscire dallo schermo. */
.atl-carousel-prev { left: -68px; }
.atl-carousel-next { right: -68px; }
@media (max-width: 1280px) {
	.atl-carousel-prev { left: -8px; }
	.atl-carousel-next { right: -8px; }
}
.atl-carousel-progress {
	height: 2px;
	background: rgba(0,0,0,0.08);
	border-radius: 1px;
	margin-top: 4px;
	overflow: hidden;
}
.atl-carousel-progress-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #194e44, #ba8139);
	transition: width 0.25s ease;
}
.atl-carousel-counter {
	position: absolute;
	bottom: 32px;
	right: 12px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 999px;
	pointer-events: none;
}
@media (max-width: 700px) {
	.atl-carousel-nav { display: none; }  /* su mobile basta lo swipe */
}

/* --- Lightbox dialog ----------------------------------------------------- */
dialog.atl-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	max-width: none;
	max-height: none;
	width: 100vw;
	height: 100vh;
}
dialog.atl-lightbox::backdrop {
	background: rgba(0,0,0,0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
dialog.atl-lightbox figure {
	margin: 0;
	width: 100%; height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 60px 80px;
	box-sizing: border-box;
}
dialog.atl-lightbox figure img {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	object-fit: contain;
	border-radius: 4px;
}
dialog.atl-lightbox figcaption {
	margin-top: 16px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: rgba(255,255,255,0.85);
	text-align: center;
	max-width: 80ch;
}
dialog.atl-lightbox button {
	position: absolute;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	transition: all 0.2s;
}
dialog.atl-lightbox button:hover,
dialog.atl-lightbox button:focus-visible {
	background: rgba(255,255,255,0.22);
	transform: scale(1.05);
	outline: none;
}
dialog.atl-lightbox button ion-icon { font-size: 28px; }
.atl-lightbox-close { top: 18px; right: 18px; }
.atl-lightbox-prev  { left: 18px; top: 50%; transform: translateY(-50%); }
.atl-lightbox-next  { right: 18px; top: 50%; transform: translateY(-50%); }
.atl-lightbox-counter {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255,255,255,0.12);
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 500;
}
@media (max-width: 600px) {
	dialog.atl-lightbox figure { padding: 56px 12px; }
	.atl-lightbox-prev, .atl-lightbox-next {
		bottom: 18px; top: auto; transform: none;
	}
	.atl-lightbox-prev { left: 18px; }
	.atl-lightbox-next { right: 18px; }
	.atl-lightbox-counter { bottom: 80px; }
}

/* --- Block: video YouTube facade ---------------------------------------- */
.atl-yt-facade {
	position: relative;
	display: block;
	width: 100%;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.3s;
}
.atl-yt-facade:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.35); }
.atl-yt-facade.atl-yt-16-9 { aspect-ratio: 16 / 9; }
.atl-yt-facade.atl-yt-4-3  { aspect-ratio: 4 / 3; }
.atl-yt-facade.atl-yt-21-9 { aspect-ratio: 21 / 9; }
.atl-yt-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s, filter 0.3s;
}
.atl-yt-facade:hover img {
	transform: scale(1.04);
	filter: brightness(0.85);
}
.atl-yt-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 88px;
	height: 62px;
	background: none;
	border: 0;
	cursor: pointer;
	transition: transform 0.2s;
	display: block;
}
.atl-yt-play svg { width: 100%; height: 100%; opacity: 0.92; transition: opacity 0.2s; }
.atl-yt-facade:hover .atl-yt-play { transform: scale(1.08); }
.atl-yt-facade:hover .atl-yt-play svg { opacity: 1; }
.atl-yt-facade > iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Block: quote ------------------------------------------------------- */
.atl-block-quote {
	margin: 0;
	border-left: 4px solid #194e44;
	padding-left: 28px;
	background: rgba(25,78,68,0.04);
	padding-top: 24px;
	padding-bottom: 24px;
	padding-right: 28px;
	border-radius: 0 8px 8px 0;
}
.atl-block-quote blockquote {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-style: italic;
	font-size: 22px;
	line-height: 1.45;
	font-weight: 500;
	color: #194e44;
}
.atl-block-quote figcaption {
	margin-top: 16px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #777;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.atl-quote-author { font-weight: 700; color: #194e44; font-size: 15px; }
.atl-quote-role { font-style: italic; }

/* --- Block: due_colonne ------------------------------------------------- */
.atl-block-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
}
.atl-block-2col > div p { margin: 0 0 1em; }
@media (max-width: 760px) {
	.atl-block-2col { grid-template-columns: 1fr; gap: 24px; }
	.atl-2col--invert-mobile .atl-2col-sx { order: 2; }
	.atl-2col--invert-mobile .atl-2col-dx { order: 1; }
}

/* --- Block: cta_inline -------------------------------------------------- */
.atl-block-cta-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-radius: 8px 28px 8px 28px;
	padding: 30px 36px;
}
.atl-cta-style--verde {
	background: #194e44;
	color: #fff;
}
.atl-cta-style--verde h3 { color: #fff; }
.atl-cta-style--verde p  { color: rgba(255,255,255,0.92); }
.atl-cta-style--ocra {
	background: #ba8139;
	color: #fff;
}
.atl-cta-style--ocra h3 { color: #fff; }
.atl-cta-style--ocra p  { color: rgba(255,255,255,0.94); }
.atl-cta-style--outline {
	background: rgba(25,78,68,0.04);
	border: 2px solid #194e44;
	color: #194e44;
}
.atl-block-cta-inline .atl-cta-inline-content {
	flex: 1 1 320px;
}
.atl-block-cta-inline h3 {
	font-family: 'Beckan', serif;
	font-size: clamp(24px, 2.8vw, 32px);
	margin: 0 0 8px;
	font-weight: 400;
}
.atl-block-cta-inline p {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}
.atl-block-cta-inline .btn-asym { flex: 0 0 auto; }
@media (max-width: 600px) {
	.atl-block-cta-inline { flex-direction: column; align-items: stretch; padding: 26px 22px; }
	.atl-block-cta-inline .btn-asym { text-align: center; }
}

/* --- Block: numeri_chiave ----------------------------------------------- */
.atl-block-numeri {
	display: grid;
	gap: 28px;
	background: #ba8139;
	background-image: url('./assets/images/texture-ocra.jpg');
	background-size: cover;
	color: #fff;
	padding: 50px 40px;
	border-radius: 12px 36px 12px 36px;
	text-align: center;
}
.atl-numbers-count-2 { grid-template-columns: repeat(2, 1fr); }
.atl-numbers-count-3 { grid-template-columns: repeat(3, 1fr); }
.atl-numbers-count-4 { grid-template-columns: repeat(4, 1fr); }
.atl-number-cell { padding: 8px; }
.atl-number-value {
	font-family: 'Beckan', serif;
	font-size: clamp(48px, 6vw, 72px);
	line-height: 1;
	color: #fff;
	font-weight: 400;
	margin-bottom: 8px;
}
.atl-number-label {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.92);
	font-weight: 600;
}
@media (max-width: 700px) {
	.atl-numbers-count-3,
	.atl-numbers-count-4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Block: documento_download ----------------------------------------- */
.atl-block-documento {
	display: flex;
	align-items: center;
	gap: 22px;
	background: #fff;
	border: 1px solid #e0e4e1;
	padding: 20px 26px;
	border-radius: 8px 22px 8px 22px;
	text-decoration: none;
	color: inherit;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.atl-block-documento:hover {
	border-color: #194e44;
	box-shadow: 0 8px 24px rgba(25,78,68,0.16);
	transform: translateY(-2px);
}
.atl-doc-icon {
	width: 64px; height: 64px; flex: 0 0 64px;
	background: rgba(25,78,68,0.08);
	color: #194e44;
	border-radius: 12px 4px 12px 4px;
	display: flex; align-items: center; justify-content: center;
}
.atl-doc-icon ion-icon { font-size: 32px; }
.atl-doc-body { flex: 1 1 auto; min-width: 0; }
.atl-doc-title {
	font-family: 'Beckan', serif;
	font-size: 22px;
	color: #194e44;
	margin: 0 0 4px;
	font-weight: 400;
	line-height: 1.2;
}
.atl-doc-desc {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #555;
	margin: 0 0 6px;
	line-height: 1.4;
}
.atl-doc-meta {
	display: inline-flex;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	color: #999;
	letter-spacing: 0.04em;
	font-weight: 600;
	text-transform: uppercase;
}
.atl-doc-ext {
	background: #194e44;
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	letter-spacing: 0.08em;
}
.atl-doc-action {
	flex: 0 0 auto;
	display: flex; align-items: center; gap: 6px;
	color: #ba8139;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
}
.atl-doc-action ion-icon { font-size: 22px; }
@media (max-width: 600px) {
	.atl-block-documento { flex-wrap: wrap; }
	.atl-doc-action { width: 100%; justify-content: flex-end; }
}

/* --- Universal accessibility: prefers-reduced-motion -------------------- */
@media (prefers-reduced-motion: reduce) {
	.atl-gallery-item img,
	.atl-yt-facade img,
	.atl-related-card,
	.atl-block-documento { transition: none !important; }
	.atl-carousel-track { scroll-behavior: auto; }
}

/* ==========================================================================
   FASE 2 — Single templates (v1.6.0+; v1.12.0 bg bianco + tipografia ↑)
   ========================================================================== */
.atl-single {
	background: #ffffff;
	padding-bottom: 80px;
}
.atl-single .inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 32px;
}

.atl-single-meta {
	padding: 36px 0 18px;
	border-bottom: 1px solid rgba(25,78,68,0.10);
	margin-bottom: 0;
}
.atl-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: #5a5a5a;
}
.atl-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.atl-meta-item ion-icon {
	font-size: 20px;
	color: #194e44;
}

.atl-single-excerpt {
	padding: 36px 0 18px;
	font-family: 'Inter', sans-serif;
}
.atl-single-excerpt p {
	margin: 0;
	font-style: italic;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.55;
	color: #194e44;
	max-width: 820px;
	font-weight: 500;
}

/* Wrap per sticky share desktop (offset col negativo a sinistra del content) */
.atl-single-content-wrap {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	padding: 0 32px;
}
.atl-single-content-wrap .atl-single-content,
.atl-single-content-wrap .atl-block-stack {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
@media (min-width: 1100px) {
	.atl-single-content-wrap {
		max-width: 880px;
	}
	.atl-single-content-wrap::before {
		content: "";
		display: block;
	}
}

/* Single attivita / progetti hero overrides specifici aggiunti negli step relativi */

/* --- Strip "In sintesi" (single-attivita) ------------------------------- */
.atl-strip-info {
	background: #ba8139;
	background-image: url('./assets/images/texture-ocra.jpg');
	background-size: cover;
	color: #fff;
}
.atl-strip-info .inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 36px 60px;
}
.atl-strip-item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: 'Inter', sans-serif;
}
.atl-strip-item ion-icon {
	font-size: 32px;
	color: rgba(255,255,255,0.95);
	flex: 0 0 auto;
}
.atl-strip-item > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.atl-strip-label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	font-weight: 600;
}
.atl-strip-value {
	font-size: 17px;
	color: #fff;
	font-weight: 600;
}
@media (max-width: 700px) {
	.atl-strip-info .inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

/* --- Layout single con sidebar (single-attivita / single-progetti) ------ */
.atl-single-with-sidebar {
	max-width: 1240px;
	margin: 0 auto;
	padding: 60px 32px 30px;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 60px;
	align-items: start;
}
.atl-single-main { min-width: 0; }
.atl-single-main .atl-block-stack,
.atl-single-main .atl-single-content {
	max-width: none;
	margin: 0;
	padding: 0;
}
.atl-single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: calc(var(--nav-h) + 24px);
}
.atl-sidebar-box {
	background: #fff;
	padding: 24px 26px;
	border-radius: 8px 24px 8px 24px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.atl-sidebar-box h4 {
	font-family: 'Beckan', serif;
	font-size: 22px;
	color: #194e44;
	margin: 0 0 14px;
	font-weight: 400;
}
.atl-sidebar-box p {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #555;
	margin: 0 0 16px;
	line-height: 1.5;
}
.atl-sidebar-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.atl-sidebar-box li {
	border-bottom: 1px solid rgba(25,78,68,0.1);
	padding: 10px 0;
	font-size: 14px;
}
.atl-sidebar-box li:last-child { border-bottom: 0; }
.atl-sidebar-box a {
	color: #194e44;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	transition: color 0.2s;
}
.atl-sidebar-box a:hover { color: #ba8139; }
.atl-sidebar-iscrizione { background: #194e44; color: #fff; }
.atl-sidebar-iscrizione h4 { color: #fff; }
.atl-sidebar-iscrizione p { color: rgba(255,255,255,0.92); }
.atl-sidebar-iscrizione .btn-asym { width: 100%; text-align: center; }
.atl-sidebar-share .atl-share { align-items: flex-start; }
.atl-sidebar-share .atl-share-label { display: none; }
.atl-sidebar-share .atl-share ul { flex-direction: row; }

/* Mobile: sidebar diventa colonna SOTTO il content */
@media (max-width: 1099px) {
	.atl-single-with-sidebar {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.atl-single-sidebar {
		position: static;
		top: auto;
	}
}

/* CTA torna all'archivio */
.atl-single-footer-cta {
	max-width: 1240px;
	margin: 30px auto 0;
	padding: 0 32px 60px;
	text-align: center;
}
.atl-single-footer-cta .btn-asym {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* --- Single progetti: cerchio logo nel hero ----------------------------- */
.atl-progetto-logo-circle {
	width: 240px;
	height: 240px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	padding: 28px;
	box-shadow: 0 22px 50px rgba(0,0,0,0.4);
}
.atl-progetto-logo-circle img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
@media (max-width: 700px) {
	.atl-progetto-logo-circle { width: 180px; height: 180px; padding: 22px; }
}

/* --- Scheda dati progetto ----------------------------------------------- */
.atl-progetto-data {
	background: #194e44;
	background-image: url('./assets/images/texture-verde.jpg');
	background-size: cover;
	color: #fff;
}
.atl-progetto-data .inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 32px;
}
.atl-progetto-data-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px;
}
.atl-progetto-data-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.atl-data-label {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	font-weight: 600;
}
.atl-data-value {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: #fff;
	font-weight: 600;
}
.atl-data-value a {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid rgba(255,255,255,0.4);
	padding-bottom: 1px;
	transition: border-color 0.2s;
}
.atl-data-value a:hover { border-bottom-color: #fff; }
.atl-data-value a ion-icon { font-size: 16px; }

/* Badge stato progetto */
.atl-progetto-badge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.atl-badge-attivo   { background: #5ec48c; color: #0c3324; }
.atl-badge-concluso { background: rgba(255,255,255,0.18); color: #fff; }
.atl-badge-in-pausa { background: #ba8139; color: #fff; }

/* Partner grid */
.atl-progetto-partner {
	margin-top: 50px;
	padding-top: 40px;
	border-top: 1px solid rgba(255,255,255,0.18);
}
.atl-progetto-partner-title {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	font-weight: 600;
	margin: 0 0 24px;
	text-align: center;
}
.atl-progetto-partner-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 28px 36px;
}
.atl-partner-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	max-width: 200px;
	padding: 12px 20px;
	background: rgba(255,255,255,0.92);
	border-radius: 8px;
	transition: transform 0.2s, box-shadow 0.2s;
	text-decoration: none;
}
.atl-partner-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.atl-partner-item img {
	max-width: 140px;
	max-height: 60px;
	object-fit: contain;
	display: block;
}
.atl-partner-name {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #194e44;
	font-weight: 600;
}

/* --- Galleria automatica progetti --------------------------------------- */
.atl-progetto-auto-gallery {
	margin-top: 0;
	padding-top: 60px !important;
	border-top: 1px solid rgba(25,78,68,0.12);
}

/* ==========================================================================
   FASE 2 — Archive pages (v1.9.0+)
   ========================================================================== */
.atl-archive {
	background: #faf7f2;  /* sabbia molto chiara, niente texture pesante */
	padding: 70px 0 110px;
	min-height: 60vh;
}
.atl-archive .inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
}
.atl-hidden { display: none !important; }

/* --- Filter tabs + search bar -------------------------------------------- */
.atl-archive-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 50px;
	padding: 14px 18px;
	background: rgba(255,255,255,0.55);
	border-radius: 8px 24px 8px 24px;
}
.atl-filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.atl-filter-tab {
	background: transparent;
	border: 0;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #194e44;
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s;
}
.atl-filter-tab:hover {
	background: rgba(25,78,68,0.1);
}
.atl-filter-tab.is-active {
	background: #194e44;
	color: #fff;
}
.atl-filter-stato {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #194e44;
	font-weight: 500;
	cursor: pointer;
}
.atl-filter-stato input { accent-color: #194e44; }

.atl-archive-search {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	max-width: 340px;
}
.atl-archive-search--centered {
	margin: 0 auto;
	max-width: 460px;
	border: 2px solid #194e44;
	box-shadow: 0 8px 24px rgba(25,78,68,0.18);
}

/* v1.16.1 — Toolbar archivio attività con label visibile sopra la search bar */
.atl-archive-toolbar--single {
	margin-bottom: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.atl-archive-toolbar-label {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	letter-spacing: 0.18em;
	font-weight: 700;
	text-transform: uppercase;
	color: #194e44;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.atl-archive-toolbar-label ion-icon {
	font-size: 18px;
	color: #ba8139;
}
.atl-archive-search input[type="search"] {
	flex: 1 1 auto;
	border: 0;
	padding: 10px 16px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	background: transparent;
	color: #194e44;
	outline: none;
}
.atl-archive-search button {
	background: #194e44;
	color: #fff;
	border: 0;
	width: 42px;
	height: 42px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.2s;
}
.atl-archive-search button ion-icon { font-size: 20px; }
.atl-archive-search button:hover { background: #0f3b33; }

/* --- Blog grid ----------------------------------------------------------- */
.atl-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
@media (max-width: 1100px) {
	.atl-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.atl-blog-grid { grid-template-columns: 1fr; }
}
.atl-blog-card {
	background: #fff;
	border-radius: 8px 28px 8px 28px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0,0,0,0.08);
	transition: transform 0.3s, box-shadow 0.3s;
}
.atl-blog-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 38px rgba(25,78,68,0.18);
}
.atl-blog-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}
.atl-blog-card-thumb {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
	background: #f0ede6;
}
.atl-blog-card-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}
.atl-blog-card:hover .atl-blog-card-thumb img { transform: scale(1.05); }
.atl-blog-card-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #194e44;
	color: #fff;
	padding: 4px 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	border-radius: 999px;
	text-transform: uppercase;
}
.atl-blog-card-body {
	padding: 22px 24px 24px;
}
.atl-blog-card-title {
	font-family: 'Beckan', serif;
	font-size: 26px;
	color: #194e44;
	margin: 0 0 12px;
	font-weight: 400;
	line-height: 1.15;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.atl-blog-card-excerpt {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #555;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.atl-blog-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: #888;
	letter-spacing: 0.02em;
}
.atl-blog-card-meta .sep { color: #ccc; }
.atl-blog-card-arrow {
	margin-left: auto;
	color: #ba8139;
	transition: transform 0.2s;
}
.atl-blog-card-arrow ion-icon { font-size: 20px; }
.atl-blog-card:hover .atl-blog-card-arrow { transform: translateX(4px); }

/* --- Archive attivita: grid (riusa .arch-card) -------------------------- */
.atl-archive-attivita .arch-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 0;
}
@media (max-width: 1100px) { .atl-archive-attivita .arch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .atl-archive-attivita .arch-grid { grid-template-columns: 1fr; } }
.atl-arch-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,0.95);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}
.atl-arch-card-cta ion-icon { font-size: 16px; transition: transform 0.2s; }
.arch-card:hover .atl-arch-card-cta ion-icon { transform: translateX(4px); }

/* --- Archive progetti: grid (riusa .project-card) ----------------------- */
.atl-archive-progetti .projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 0;
}
@media (max-width: 1100px) { .atl-archive-progetti .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .atl-archive-progetti .projects-grid { grid-template-columns: 1fr; } }
.atl-project-card-title {
	font-family: 'Beckan', serif;
	font-size: 22px;
	color: #194e44;
	margin: 6px 0 8px;
	font-weight: 400;
	line-height: 1.15;
}
.atl-project-card-title a { color: inherit; text-decoration: none; }
.atl-project-card-title a:hover { color: #ba8139; }

/* --- Pagination ---------------------------------------------------------- */
.atl-pagination {
	margin-top: 60px;
	display: flex;
	justify-content: center;
}
.atl-pagination ul.page-numbers,
.atl-pagination .page-numbers {
	list-style: none;
	display: inline-flex;
	gap: 6px;
	padding: 0;
	margin: 0;
}
.atl-pagination .page-numbers li { display: inline-flex; }
.atl-pagination a.page-numbers,
.atl-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #fff;
	color: #194e44;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
	border: 1px solid rgba(0,0,0,0.06);
	min-width: 42px;
	justify-content: center;
}
.atl-pagination a.page-numbers:hover {
	background: #194e44;
	color: #fff;
	transform: translateY(-1px);
}
.atl-pagination .page-numbers.current {
	background: #194e44;
	color: #fff;
	border-color: #194e44;
}
.atl-pagination .page-numbers.dots {
	background: transparent;
	border: 0;
	padding: 10px 4px;
}
.atl-pagination ion-icon { font-size: 16px; }

/* --- Archive empty state ------------------------------------------------ */
.atl-archive-empty,
.atl-filter-empty {
	text-align: center;
	padding: 80px 32px;
	background: rgba(255,255,255,0.6);
	border-radius: 16px;
	color: #194e44;
	font-family: 'Inter', sans-serif;
}
.atl-archive-empty ion-icon {
	font-size: 64px;
	color: #ba8139;
	margin-bottom: 16px;
}
.atl-archive-empty h3 {
	font-family: 'Beckan', serif;
	font-size: 32px;
	font-weight: 400;
	color: #194e44;
	margin: 0 0 10px;
}
.atl-archive-empty p { font-size: 16px; color: #555; margin: 0; }

/* ==========================================================================
   FASE 2 — Pagina Contatti + form custom (v1.10.0+)
   ========================================================================== */
.atl-contact-page {
	background: var(--sabbia, #d3b296);
	background-image: url('./assets/images/texture-sabbia.jpg');
	background-size: cover;
	padding: 70px 0 100px;
}
.atl-contact-page .inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}
.atl-contact-grid-2col {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 60px;
	align-items: start;
}
@media (max-width: 900px) {
	.atl-contact-grid-2col { grid-template-columns: 1fr; gap: 40px; }
}

/* --- Colonna info -------------------------------------------------------- */
.atl-contact-info {
	background: rgba(255,255,255,0.65);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	padding: 40px 36px;
	border-radius: 14px 36px 14px 36px;
}
.atl-contact-info h2 {
	font-family: 'Beckan', serif;
	font-size: 38px;
	color: #194e44;
	margin: 0 0 28px;
	font-weight: 400;
}
.atl-info-block {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(25,78,68,0.12);
}
.atl-info-block:last-child { border-bottom: 0; }
.atl-info-icon {
	width: 48px; height: 48px;
	flex: 0 0 48px;
	background: #194e44;
	color: #fff;
	border-radius: 12px 4px 12px 4px;
	display: flex; align-items: center; justify-content: center;
}
.atl-info-icon ion-icon { font-size: 24px; }
.atl-info-block h4 {
	font-family: 'Beckan', serif;
	font-size: 20px;
	color: #194e44;
	margin: 0 0 4px;
	font-weight: 400;
}
.atl-info-block p {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #2f2f2f;
}
.atl-info-block a {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: #194e44;
	text-decoration: none;
	border-bottom: 1px solid rgba(25,78,68,0.3);
	transition: border-color 0.2s;
}
.atl-info-block a:hover { border-bottom-color: #194e44; }
.atl-info-socials {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}
.atl-info-socials a {
	width: 38px; height: 38px;
	background: #194e44;
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center; justify-content: center;
	border: 0;
	transition: transform 0.2s, background 0.2s;
}
.atl-info-socials a:hover {
	background: #ba8139;
	transform: translateY(-2px);
}
.atl-info-socials ion-icon { font-size: 20px; }

/* --- Form contatti ------------------------------------------------------- */
.atl-contact-form-wrap {
	background: #fff;
	padding: 44px 40px;
	border-radius: 14px 36px 14px 36px;
	box-shadow: 0 14px 38px rgba(25,78,68,0.12);
}
.atl-contact-form-wrap h2 {
	font-family: 'Beckan', serif;
	font-size: 38px;
	color: #194e44;
	margin: 0 0 8px;
	font-weight: 400;
}
.atl-contact-form-intro {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: #666;
	margin: 0 0 28px;
}

.atl-contact-form { display: flex; flex-direction: column; gap: 18px; }
.atl-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 600px) { .atl-form-row { grid-template-columns: 1fr; } }

.atl-form-field {
	display: flex;
	flex-direction: column;
	position: relative;
}
.atl-form-label {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #194e44;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}
.atl-form-label em {
	color: #b32d2e;
	font-style: normal;
	font-weight: 700;
}

.atl-contact-form input[type="text"],
.atl-contact-form input[type="email"],
.atl-contact-form input[type="tel"],
.atl-contact-form select,
.atl-contact-form textarea {
	width: 100%;
	background: #f6f8f7;
	border: 1px solid #e0e4e1;
	border-radius: 8px;
	padding: 12px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: #1a1a1a;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	height: auto;
	line-height: 1.4;
}

/* v1.15.1 — Select uniform su Safari/Chrome/Firefox: rimuovi appearance
   nativa e disegna arrow SVG custom. Senza questo, Safari mostra una select
   con padding/border-radius nativi ignorando il nostro CSS. */
.atl-contact-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 42px; /* spazio per la freccia */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23194e44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
	background-color: #f6f8f7;
	cursor: pointer;
	min-height: 47px; /* match input height calcolata: padding 12+12 + line-height ~21 + border 2 */
}
.atl-contact-form select::-ms-expand { display: none; }
.atl-contact-form select:focus {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23194e44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-color: #fff;
}

.atl-contact-form input:focus,
.atl-contact-form select:focus,
.atl-contact-form textarea:focus {
	border-color: #194e44;
	box-shadow: 0 0 0 3px rgba(25,78,68,0.12);
	outline: none;
}
.atl-contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }

.atl-form-field.has-error input,
.atl-form-field.has-error select,
.atl-form-field.has-error textarea {
	border-color: #b32d2e;
	background: rgba(179,45,46,0.04);
}
.atl-field-error {
	color: #b32d2e;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	margin-top: 4px;
	display: block;
}

.atl-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #444;
	cursor: pointer;
	line-height: 1.4;
	padding: 8px 0;
}
.atl-form-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	accent-color: #194e44;
	flex: 0 0 auto;
}
.atl-form-checkbox a { color: #194e44; text-decoration: underline; }
.atl-form-checkbox em { color: #b32d2e; font-style: normal; font-weight: 700; }
.atl-form-checkbox.has-error span { color: #b32d2e; }

/* Honeypot — visualmente nascosto ma accessibile per i bot */
.atl-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

.atl-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	margin-top: 6px;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 14px;
}
.atl-form-submit[disabled] { opacity: 0.7; cursor: progress; }
.atl-form-submit .btn-loader { display: inline-flex; align-items: center; }

.atl-form-feedback {
	margin-top: 14px;
	padding: 14px 16px;
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	border-left: 4px solid;
}
.atl-form-feedback.success {
	background: rgba(94,196,140,0.18);
	border-color: #2e7a4f;
	color: #0c3324;
}
.atl-form-feedback.error {
	background: rgba(179,45,46,0.1);
	border-color: #b32d2e;
	color: #6b1c1d;
}
/* v1.16.0 — nota privacy reCAPTCHA (richiesta da Google ToS quando il badge floating è nascosto) */
.atl-recaptcha-notice {
	margin-top: 14px;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	line-height: 1.4;
	color: #888;
	text-align: center;
}
.atl-recaptcha-notice a {
	color: #555;
	text-decoration: underline;
}
.atl-recaptcha-notice a:hover { color: #194e44; }

/* --- Mappa OSM ----------------------------------------------------------- */
.atl-contact-mappa {
	margin-top: 70px;
}
.atl-mappa-title {
	font-family: 'Beckan', serif;
	font-size: 38px;
	color: #194e44;
	margin: 0 0 24px;
	font-weight: 400;
	text-align: center;
}
.atl-contact-mappa iframe {
	width: 100%;
	height: 400px;
	border: 0;
	border-radius: 14px 36px 14px 36px;
	box-shadow: 0 14px 38px rgba(25,78,68,0.16);
	display: block;
}
/* v1.15.1 — Mappa Leaflet (sostituisce iframe OSM) */
.atl-contact-mappa .atl-map {
	width: 100%;
	height: 440px;
	border-radius: 14px 36px 14px 36px;
	box-shadow: 0 14px 38px rgba(25,78,68,0.16);
	overflow: hidden;
	background: #f0ede6;
}
.atl-contact-mappa .leaflet-container {
	font-family: 'Inter', sans-serif;
}
.atl-contact-mappa .leaflet-popup-content-wrapper {
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.atl-contact-mappa .leaflet-popup-content {
	margin: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: #194e44;
}
.atl-contact-mappa .atl-map-marker {
	background: transparent;
	border: 0;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
.atl-contact-mappa .leaflet-control-zoom a {
	background: #fff;
	color: #194e44;
	border-color: rgba(0,0,0,0.1);
}
.atl-contact-mappa .leaflet-control-zoom a:hover {
	background: #194e44;
	color: #fff;
}
.atl-mappa-link {
	margin-top: 14px;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
}
.atl-mappa-link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #194e44;
	text-decoration: none;
	border-bottom: 1px solid rgba(25,78,68,0.3);
}
.atl-mappa-link a:hover { border-bottom-color: #194e44; }

/* ==========================================================================
   FASE 2 — Pagina Collabora con Noi (v1.13.0)
   ========================================================================== */

/* --- Sezione 1: intro con valori ---------------------------------------- */
.atl-collab-intro {
	background: #ffffff;
	padding: 100px 0 80px;
	text-align: center;
}
.atl-collab-intro .inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}
.atl-collab-intro .overline {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	color: #ba8139;
	font-size: 13px;
	letter-spacing: 0.22em;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.atl-collab-intro h2 {
	font-family: 'Beckan', serif;
	font-size: clamp(40px, 5vw, 60px);
	color: #194e44;
	margin: 0 0 24px;
	font-weight: 400;
	line-height: 1.05;
}
.atl-collab-intro-lead {
	font-family: 'Inter', sans-serif;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.6;
	color: #2f2f2f;
	max-width: 760px;
	margin: 0 auto 70px;
}

.atl-collab-values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	text-align: left;
}
.atl-collab-value {
	background: #faf7f2;
	padding: 32px 26px 28px;
	border-radius: 8px 28px 8px 28px;
	transition: transform 0.3s, box-shadow 0.3s;
}
.atl-collab-value:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 38px rgba(25,78,68,0.12);
}
.atl-collab-value-icon {
	width: 56px; height: 56px;
	background: #194e44;
	color: #fff;
	border-radius: 12px 4px 12px 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.atl-collab-value-icon ion-icon { font-size: 28px; }
.atl-collab-value h3 {
	font-family: 'Beckan', serif;
	font-size: 24px;
	color: #194e44;
	margin: 0 0 10px;
	font-weight: 400;
	line-height: 1.15;
}
.atl-collab-value p {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #555;
	margin: 0;
}
@media (max-width: 1100px) {
	.atl-collab-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.atl-collab-values { grid-template-columns: 1fr; }
}

/* --- Sezione 2: 4 cards modalità di collaborazione ---------------------- */
.atl-collab-modes {
	background: #faf7f2;
	padding: 100px 0;
}
.atl-collab-modes .inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
	text-align: center;
}
.atl-collab-modes .overline {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	color: #ba8139;
	font-size: 13px;
	letter-spacing: 0.22em;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.atl-collab-modes h2 {
	font-family: 'Beckan', serif;
	font-size: clamp(40px, 5vw, 60px);
	color: #194e44;
	margin: 0 0 60px;
	font-weight: 400;
	line-height: 1.05;
}
.atl-collab-mode-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	text-align: left;
}
.atl-collab-mode {
	background: #fff;
	padding: 40px 36px;
	border-radius: 12px 36px 12px 36px;
	box-shadow: 0 4px 18px rgba(0,0,0,0.06);
	transition: transform 0.3s, box-shadow 0.3s;
	border-top: 4px solid transparent;
}
.atl-collab-mode:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 42px rgba(25,78,68,0.16);
}
.atl-collab-mode--vol     { border-top-color: #194e44; }
.atl-collab-mode--pro     { border-top-color: #ba8139; }
.atl-collab-mode--partner { border-top-color: #6f4f3a; }
.atl-collab-mode--don     { border-top-color: #b32d2e; }
.atl-collab-mode-icon {
	width: 64px; height: 64px;
	background: rgba(25,78,68,0.08);
	color: #194e44;
	border-radius: 14px 4px 14px 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
}
.atl-collab-mode-icon ion-icon { font-size: 32px; }
.atl-collab-mode--pro .atl-collab-mode-icon     { background: rgba(186,129,57,0.12); color: #ba8139; }
.atl-collab-mode--partner .atl-collab-mode-icon { background: rgba(111,79,58,0.12); color: #6f4f3a; }
.atl-collab-mode--don .atl-collab-mode-icon     { background: rgba(179,45,46,0.10); color: #b32d2e; }
.atl-collab-mode h3 {
	font-family: 'Beckan', serif;
	font-size: clamp(26px, 2.4vw, 32px);
	color: #194e44;
	margin: 0 0 12px;
	font-weight: 400;
	line-height: 1.15;
}
.atl-collab-mode > p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: #444;
	margin: 0 0 18px;
}
.atl-collab-mode ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(25,78,68,0.1);
	padding-top: 16px;
}
.atl-collab-mode li {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #555;
	padding: 6px 0 6px 22px;
	position: relative;
	line-height: 1.45;
}
.atl-collab-mode li::before {
	content: "›";
	position: absolute;
	left: 6px;
	color: #ba8139;
	font-weight: 700;
}
@media (max-width: 800px) {
	.atl-collab-mode-grid { grid-template-columns: 1fr; }
}

/* --- Sezione 3: form + sidebar racconto -------------------------------- */
.atl-collab-form-section {
	background: #ffffff;
	padding: 100px 0 60px;
}
.atl-collab-form-section .inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}
.atl-collab-form-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 60px;
	align-items: start;
}
@media (max-width: 900px) {
	.atl-collab-form-grid { grid-template-columns: 1fr; gap: 50px; }
}

.atl-collab-side {
	position: sticky;
	top: calc(var(--nav-h) + 30px);
}
.atl-collab-side .overline {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	color: #ba8139;
	font-size: 13px;
	letter-spacing: 0.22em;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.atl-collab-side h2 {
	font-family: 'Beckan', serif;
	font-size: clamp(36px, 4.4vw, 52px);
	color: #194e44;
	margin: 0 0 18px;
	font-weight: 400;
	line-height: 1.05;
}
.atl-collab-side > p {
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #2f2f2f;
	margin: 0 0 36px;
}

.atl-collab-quote {
	background: #194e44;
	background-image: url('./assets/images/texture-verde.jpg');
	background-size: cover;
	color: #fff;
	padding: 32px 30px;
	border-radius: 12px 36px 12px 36px;
	margin-bottom: 36px;
	position: relative;
}
.atl-collab-quote ion-icon {
	font-size: 42px;
	color: rgba(255,255,255,0.35);
	margin-bottom: 8px;
}
.atl-collab-quote blockquote {
	margin: 0 0 14px;
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1.5;
	font-style: italic;
	color: #fff;
}
.atl-collab-quote-author {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.atl-collab-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgba(25,78,68,0.12);
}
.atl-collab-stat {
	text-align: center;
}
.atl-collab-stat-num {
	display: block;
	font-family: 'Beckan', serif;
	font-size: clamp(34px, 3.8vw, 44px);
	color: #194e44;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 4px;
}
.atl-collab-stat-label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: #5a5a5a;
	letter-spacing: 0.04em;
}

@media (max-width: 900px) {
	.atl-collab-side { position: static; top: auto; }
}

/* Form Collabora variante */
.atl-collab-form-wrap.atl-contact-form-wrap {
	padding: 44px 40px;
}
.atl-collab-form .atl-form-row {
	gap: 18px;
}
@media (max-width: 700px) {
	.atl-collab-form-wrap.atl-contact-form-wrap { padding: 32px 24px; }
}

/* ==========================================================================
   ===== MOBILE HARDENING v1.17.0 =====
   Ottimizzazione mobile completa per tutti i componenti FASE 2.
   Blocco centralizzato per facilità di manutenzione.
   Breakpoint: 768px (mobile generico) e 480px (small phones).
   ========================================================================== */

/* --- Global safety net (sempre attivi) ---------------------------------- */
* {
	-webkit-tap-highlight-color: transparent;
}
html {
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
body {
	overflow-x: hidden;
}
img, video, iframe {
	max-width: 100%;
	height: auto;
}
.atl-single-content img,
.atl-block-stack img {
	max-width: 100%;
	height: auto;
}

/* === MOBILE GENERICO (≤768px) ============================================ */
@media (max-width: 768px) {

	/* HERO PAGINE INTERNE — h1 contenuto, overline pill compatto */
	.hero.hero-inner { min-height: 420px; }
	.hero-inner-wrap {
		padding: 120px 20px 70px;
		max-width: 100%;
	}
	.hero-inner-wrap h1 {
		font-size: clamp(38px, 9vw, 56px);
		line-height: 1.05;
		text-wrap: balance;
		hyphens: auto;
	}
	.hero-inner-wrap .lead {
		font-size: 16px;
		line-height: 1.5;
		max-width: 100%;
	}
	.hero-inner-wrap .overline {
		font-size: 11px;
		padding: 5px 12px;
		letter-spacing: 0.18em;
	}
	.atl-breadcrumb {
		font-size: 12px;
	}

	/* SINGLE CONTENT — body 18px, h2/h3 ridotti, padding 20 */
	.atl-single-content,
	.atl-block-stack {
		padding: 50px 20px 40px;
		font-size: 18px;
		line-height: 1.7;
	}
	.atl-single-content h2,
	.atl-block-stack .atl-block-testo h2 {
		font-size: 32px !important;
		margin: 44px 0 18px;
		line-height: 1.1;
	}
	.atl-single-content h3,
	.atl-block-stack .atl-block-testo h3 {
		font-size: 24px !important;
		margin: 32px 0 12px;
	}
	.atl-single-content > p:first-child {
		font-size: 19px;
		line-height: 1.55;
	}
	.atl-block-stack { padding-top: 50px; padding-bottom: 40px; }
	.atl-block-stack > .atl-block { margin-bottom: 44px; }
	.atl-block-title { font-size: 26px; }

	/* SINGLE META — meta-row scrollabile / wrap pulito */
	.atl-single-meta { padding: 24px 0 14px; }
	.atl-meta-row {
		gap: 18px;
		font-size: 13px;
		flex-wrap: wrap;
	}
	.atl-meta-item ion-icon { font-size: 17px; }
	.atl-single-excerpt { padding: 24px 0 12px; }
	.atl-single-excerpt p {
		font-size: 17px;
		line-height: 1.55;
	}
	.atl-single .inner,
	.atl-single-content-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* CTA TORNA ALL'ARCHIVIO + SINGLE FOOTER */
	.atl-single-footer-cta {
		padding: 0 20px 50px;
	}
	.atl-single-footer-cta .btn-asym {
		width: 100%;
		justify-content: center;
	}

	/* QUOTE — più contenuto */
	.atl-block-quote {
		padding: 18px 16px 18px 20px;
	}
	.atl-block-quote blockquote {
		font-size: 18px;
	}

	/* CTA INLINE — stack verticale */
	.atl-block-cta-inline {
		flex-direction: column;
		align-items: stretch;
		padding: 28px 22px;
		text-align: center;
	}
	.atl-block-cta-inline h3 { font-size: 24px; }
	.atl-block-cta-inline p { font-size: 15px; }
	.atl-block-cta-inline .btn-asym { width: 100%; text-align: center; }

	/* NUMERI CHIAVE — 2 colonne max */
	.atl-block-numeri {
		padding: 36px 22px;
		gap: 22px;
	}
	.atl-numbers-count-3,
	.atl-numbers-count-4 { grid-template-columns: repeat(2, 1fr); }
	.atl-number-value { font-size: 40px; }

	/* DOCUMENTO — wrap action */
	.atl-block-documento {
		flex-wrap: wrap;
		padding: 18px 22px;
		gap: 16px;
	}
	.atl-doc-title { font-size: 19px; }

	/* CTA BLOCK FINE ARTICOLO */
	.atl-cta-block { padding: 60px 0; }
	.atl-cta-block .inner { padding: 0 20px; }
	.atl-cta-card {
		padding: 32px 24px;
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		border-radius: 12px 32px 12px 32px;
	}
	.atl-cta-text h2 { font-size: 30px; }
	.atl-cta-text p { font-size: 16px; }
	.atl-cta-card .btn-asym {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	/* RELATED POSTS */
	.atl-related { padding: 50px 0 70px; }
	.atl-related .inner { padding: 0 20px; }
	.atl-related-title { font-size: 32px; margin-bottom: 32px; }

	/* ARCHIVE — padding compatto, search bar full width */
	.atl-archive { padding: 50px 0 80px; }
	.atl-archive .inner { padding: 0 20px; }
	.atl-archive-filter {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 14px 16px;
		border-radius: 12px 32px 12px 32px;
	}
	.atl-filter-tabs {
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 4px;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.atl-filter-tabs::-webkit-scrollbar { display: none; }
	.atl-filter-tab { white-space: nowrap; flex-shrink: 0; }
	.atl-archive-search {
		max-width: 100%;
		width: 100%;
	}
	.atl-archive-search--centered {
		max-width: 100%;
	}
	.atl-archive-toolbar--single {
		margin-bottom: 36px;
	}

	/* PAGINATION compatta */
	.atl-pagination a.page-numbers,
	.atl-pagination span.page-numbers {
		min-width: 40px;
		padding: 8px 12px;
		font-size: 13px;
	}

	/* PAGINA CONTATTI */
	.atl-contact-page { padding: 50px 0 80px; }
	.atl-contact-page .inner { padding: 0 20px; }
	.atl-contact-info { padding: 30px 22px; border-radius: 12px 32px 12px 32px; }
	.atl-contact-info h2 { font-size: 30px; }
	.atl-info-block { padding: 16px 0; gap: 14px; }
	.atl-info-block h4 { font-size: 18px; }
	.atl-info-block p, .atl-info-block a { font-size: 14px; }
	.atl-contact-form-wrap { padding: 32px 22px; border-radius: 12px 32px 12px 32px; }
	.atl-contact-form-wrap h2 { font-size: 30px; }
	.atl-contact-mappa { margin-top: 50px; }
	.atl-contact-mappa .atl-map {
		height: 320px;
		border-radius: 12px 32px 12px 32px;
	}
	.atl-mappa-title { font-size: 28px; }

	/* PAGINA COLLABORA */
	.atl-collab-intro { padding: 60px 0 50px; }
	.atl-collab-intro .inner { padding: 0 20px; }
	.atl-collab-intro h2 { font-size: 32px; line-height: 1.1; }
	.atl-collab-intro-lead { font-size: 17px; line-height: 1.55; margin-bottom: 44px; }
	.atl-collab-values { gap: 16px; }
	.atl-collab-value { padding: 24px 20px; }
	.atl-collab-value h3 { font-size: 21px; }
	.atl-collab-value p { font-size: 14px; }

	.atl-collab-modes { padding: 60px 0; }
	.atl-collab-modes .inner { padding: 0 20px; }
	.atl-collab-modes h2 { font-size: 32px; line-height: 1.1; margin-bottom: 36px; }
	.atl-collab-mode { padding: 28px 22px; border-radius: 10px 28px 10px 28px; }
	.atl-collab-mode h3 { font-size: 22px; }
	.atl-collab-mode > p { font-size: 15px; }
	.atl-collab-mode li { font-size: 13px; }

	.atl-collab-form-section { padding: 60px 0 30px; }
	.atl-collab-form-section .inner { padding: 0 20px; }
	.atl-collab-side h2 { font-size: 28px; }
	.atl-collab-side > p { font-size: 15px; }
	.atl-collab-quote { padding: 24px 22px; border-radius: 10px 28px 10px 28px; }
	.atl-collab-quote blockquote { font-size: 16px; }
	.atl-collab-stats { gap: 12px; }
	.atl-collab-stat-num { font-size: 32px; }
	.atl-collab-stat-label { font-size: 11px; }

	/* FORM — touch target più grandi, label più visibili */
	.atl-contact-form input[type="text"],
	.atl-contact-form input[type="email"],
	.atl-contact-form input[type="tel"],
	.atl-contact-form select,
	.atl-contact-form textarea {
		font-size: 16px; /* ≥16 per evitare auto-zoom iOS al focus */
		padding: 13px 14px;
		min-height: 48px;
	}
	.atl-contact-form select {
		min-height: 48px;
	}
	.atl-form-label {
		font-size: 14px;
	}
	.atl-form-checkbox {
		font-size: 14px;
		padding: 10px 0;
	}
	.atl-form-submit {
		width: 100%;
		min-height: 54px;
		font-size: 14px;
	}

	/* ARCHIVE BLOG CARDS */
	.atl-blog-card-title { font-size: 22px; }
	.atl-blog-card-excerpt { font-size: 14px; }
	.atl-blog-card-body { padding: 18px 20px 22px; }

	/* SHARE BUTTONS — orizzontale, dimensioni leggermente ridotte */
	.atl-share-btn { width: 40px; height: 40px; }
	.atl-share-btn ion-icon { font-size: 18px; }

	/* ADMIN BAR mobile size già 46px (FASE 1.1.x) — disattivo eventuale push extra */

	/* FOOTER spacing più stretto */
	.footer-inner { padding: 0 4px; }
}

/* === SMALL PHONES (≤480px) — refinement extra ============================ */
@media (max-width: 480px) {

	/* HERO HOME — h1 enorme del mockup va contenuto ulteriormente */
	.hero h1 {
		font-size: clamp(48px, 14vw, 64px) !important;
		line-height: 1.05;
	}
	.hero p.lead { font-size: 15px; }
	.hero .overline { font-size: 12px; }

	/* HERO PAGINE INTERNE */
	.hero.hero-inner { min-height: 380px; }
	.hero-inner-wrap {
		padding: 100px 16px 60px;
	}
	.hero-inner-wrap h1 {
		font-size: clamp(32px, 10vw, 44px);
	}
	.hero-inner-wrap .lead {
		font-size: 15px;
	}

	/* SINGLE — padding più stretto */
	.atl-single-content,
	.atl-block-stack {
		padding-left: 16px;
		padding-right: 16px;
	}
	.atl-single .inner,
	.atl-single-content-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
	.atl-single-content h2,
	.atl-block-stack .atl-block-testo h2 { font-size: 28px !important; }
	.atl-single-content h3,
	.atl-block-stack .atl-block-testo h3 { font-size: 22px !important; }

	/* CARD ATTIVITÀ HOME — riduzione padding */
	.arch-card { padding: 50px 24px; }
	.arch-card h3 { font-size: 26px; }

	/* PROJECTS HOME — già max-width 460 mobile */
	.project-card .panel { padding: calc(50% + 24px) 8% 40px; }

	/* CARD CONTATTI HOME */
	.contact-card { padding: 26px 22px; }
	.contact-card h4 { font-size: 16px; }
	.contact-extras { grid-template-columns: 1fr; }
	.extra-card { padding: 24px 22px; text-align: center; }

	/* PILASTRI HOME */
	.pilastro-card { padding: 36px 24px 50px; min-height: auto; }
	.pilastro-card h3 { font-size: 28px; }
	.pilastro-num { font-size: 32px; }

	/* COLLABORA */
	.atl-collab-intro h2,
	.atl-collab-modes h2 { font-size: 28px; }
	.atl-collab-form-grid { gap: 36px; }

	/* CTA BLOCK */
	.atl-cta-text h2 { font-size: 26px; }

	/* CONTATTI */
	.atl-contact-info { padding: 26px 18px; }
	.atl-contact-form-wrap { padding: 26px 18px; }
	.atl-contact-form-wrap h2 { font-size: 26px; }

	/* CAROUSEL nav — already nascosti su 700, ok */

	/* GALLERY GRID — gap stretto */
	.atl-gallery-grid { gap: 6px !important; }

	/* RELATED CARD */
	.atl-related-card { border-radius: 6px 22px 6px 22px; }
	.atl-related-h { font-size: 22px; }

	/* ARCHIVE BLOG */
	.atl-blog-card { border-radius: 6px 22px 6px 22px; }
	.atl-blog-card-thumb { aspect-ratio: 16/10; }

	/* BUTTONS asym più compatti */
	.btn-asym {
		padding: 16px 22px;
		font-size: 14px;
	}

	/* FOOTER */
	.footer { padding: 50px 16px 24px; }
	.footer-brand img { max-width: 220px; }
	.footer-col h5 { font-size: 14px; }

	/* ADMIN BAR logo cell padding ridotto su small mobile */
	#wpadminbar #wp-admin-bar-atl-logo > .ab-item { padding: 0 12px !important; }
	#wpadminbar #wp-admin-bar-atl-logo .atl-adminbar-logo { height: 28px; }
}

/* === EXTRA SMALL (≤360px iPhone SE) — minimi tweak ======================= */
@media (max-width: 360px) {
	.hero-inner-wrap h1 { font-size: clamp(28px, 11vw, 38px); }
	.atl-single-content h2,
	.atl-block-stack .atl-block-testo h2 { font-size: 26px !important; }
	.atl-collab-intro h2,
	.atl-collab-modes h2 { font-size: 26px; }
	.atl-cta-text h2 { font-size: 24px; }
	.atl-related-title { font-size: 28px; }
	.btn-asym { padding: 14px 18px; font-size: 13px; }
}