/* =========================================================
   ANGOLO DI VINO TORINO — CHI SIAMO
   Layout ricostruito sulla bozza grafica approvata.
   Header invariato: la pagina parte esattamente sotto di esso.
========================================================= */

.about-page {
    --av-shell: 1500px;
    --av-gutter: 29px;
    --av-wine: #21070b;
    --av-wine-deep: #100204;
    --av-wine-mid: #340b12;
    --av-copper: #a96b46;
    --av-copper-soft: #c88961;
    --av-paper: #f3eadf;
    --av-paper-2: #eee2d3;
    --av-ink: #211416;
    --av-muted: #665957;
    width: 100%;
    overflow: hidden;
    background: var(--av-paper);
    color: var(--av-ink);
}

/* il BODY ha page-about, il wrapper interno ha about-page */
body.page-about main {
    padding-top: var(--header-total-height, 130px);
}

.about-container {
    width: min(calc(100% - (var(--av-gutter) * 2)), var(--av-shell));
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

.about-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #bd8059;
}
.about-kicker > span { width: 30px; height: 1px; background: currentColor; flex: 0 0 auto; }
.about-kicker > strong { font-size: 8px; line-height: 1; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.about-kicker-light { color: #9d6445; }
.about-small-line { width: 50px; height: 1px; margin-top: 22px; background: #ad704d; }

[data-about-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s ease; }
[data-about-reveal].is-visible { opacity: 1; transform: none; }

.about-photo-placeholder {
    width: 100%; height: 100%; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 42%, #3a0d13 0, #180407 48%, #090102 100%);
    color: rgba(179,105,67,.42); overflow: hidden;
}
.about-photo-placeholder span { font-family: "Playfair Display", Georgia, serif; font-size: clamp(60px,8vw,130px); font-weight: 400; letter-spacing: -.1em; }

/* ==================== HERO ==================== */
.about-intro {
    position: relative;
    min-height: 520px;
    background: linear-gradient(105deg,#2a080e 0%,#1b0508 47%,#0c0203 100%);
    color: #fff;
}
.about-intro-glow { position:absolute; inset:0; background:radial-gradient(circle at 14% 35%,rgba(118,27,43,.25),transparent 32%); pointer-events:none; }
.about-intro-line { display:none; }
.about-intro .about-container { min-height: 520px; }
.about-intro-layout { min-height:520px; display:grid; grid-template-columns: 39% 61%; align-items:stretch; }
.about-intro-copy { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; padding:52px 56px 70px 12px; }
.about-intro-title { margin:18px 0 0; font-family:"Playfair Display",Georgia,serif; font-size:clamp(62px,5vw,91px); font-weight:400; letter-spacing:-.055em; line-height:.91; }
.about-intro-title span,.about-intro-title em { display:block; }
.about-intro-title span { color:#fff; }
.about-intro-title em { color:#fff; font-weight:400; font-style:normal; }
.about-intro-description { max-width:390px; margin:24px 0 0; color:rgba(255,255,255,.66); font-size:12px; line-height:1.7; }
.about-intro-signature { display:none; }
.about-intro-visual { position:relative; min-width:0; overflow:hidden; }
.about-intro-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.about-intro-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(27,5,8,.22),transparent 35%),linear-gradient(0deg,rgba(8,1,2,.12),transparent 55%); }
.about-intro-monogram { position:absolute; top:56px; right:11%; display:flex; align-items:center; gap:7px; color:rgba(186,111,69,.78); font-family:"Playfair Display",Georgia,serif; font-size:clamp(70px,6.5vw,112px); line-height:1; }
.about-intro-monogram i { width:2px; height:112px; background:currentColor; transform:rotate(34deg); }
.about-intro-location { display:none; }
.about-intro-curve { position:absolute; z-index:5; left:-3%; right:-3%; bottom:-33px; height:64px; background:var(--av-paper); border-radius:50% 50% 0 0 / 52% 52% 0 0; transform:rotate(.2deg); pointer-events:none; }

/* ==================== FILOSOFIA ==================== */
.about-philosophy { position:relative; padding:86px 0 72px; background:linear-gradient(110deg,#f7f0e7 0%,#efe3d4 100%); overflow:hidden; }
.about-philosophy-grid { display:grid; grid-template-columns: 39% 61%; align-items:center; min-height:390px; }
.about-philosophy-copy { position:relative; padding:8px 55px 15px 20px; }
.about-philosophy-copy::before { content:""; position:absolute; top:0; bottom:18px; left:0; width:1px; background:#b87852; }
.about-philosophy-copy h2 { margin:20px 0 0; font-family:"Playfair Display",Georgia,serif; font-size:clamp(58px,5.1vw,90px); font-weight:400; line-height:.88; letter-spacing:-.055em; }
.about-philosophy-copy h2 span,.about-philosophy-copy h2 em { display:block; }
.about-philosophy-copy h2 em { color:var(--av-ink); font-style:normal; }
.about-philosophy-copy p { max-width:410px; margin:23px 0 0; color:var(--av-muted); font-size:11px; line-height:1.65; }
.about-philosophy-gallery { position:relative; height:400px; }
.about-philosophy-photo-main { position:absolute; top:0; left:0; width:57%; height:355px; overflow:hidden; box-shadow:0 18px 40px rgba(51,31,25,.12); }
.about-philosophy-photo-secondary { position:absolute; z-index:3; right:7%; bottom:-18px; width:36%; height:245px; overflow:hidden; border:0; box-shadow:0 20px 45px rgba(51,31,25,.18); }
.about-philosophy-photo { width:100%; height:100%; object-fit:cover; display:block; }
.about-philosophy-gallery-label { position:absolute; z-index:4; right:12%; bottom:84px; color:#fff; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.about-philosophy-gallery-label span,.about-philosophy-gallery-label strong { display:block; font-family:"Playfair Display",Georgia,serif; }
.about-philosophy-gallery-label span { font-size:15px; text-transform:uppercase; }
.about-philosophy-gallery-label strong { font-size:10px; font-style:italic; font-weight:400; }
.about-turin-watermark { position:absolute; right:0; bottom:-35px; width:145px; opacity:.09; color:#72574b; }
.about-turin-watermark svg { width:100%; fill:none; stroke:currentColor; stroke-width:1; }

/* ==================== STORIA ==================== */
.about-story { background:linear-gradient(100deg,#150305,#2b080e); color:#fff; }
.about-story .about-container { width:min(calc(100% - (var(--av-gutter) * 2)),var(--av-shell)); }
.about-story-grid { display:grid; grid-template-columns: 50% 50%; min-height:300px; }
.about-story-visual { position:relative; min-height:300px; overflow:hidden; }
.about-story-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.about-story-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,1,2,.05),rgba(20,4,7,.15) 65%,rgba(30,6,10,.7)); }
.about-story-handwriting { position:absolute; left:12%; bottom:18%; color:#b76e45; font-family:"Playfair Display",Georgia,serif; font-size:clamp(24px,2.3vw,38px); font-style:italic; line-height:1.15; transform:rotate(-7deg); }
.about-story-copy { display:flex; flex-direction:column; justify-content:center; padding:44px 60px; }
.about-story-copy h2 { margin:18px 0 0; font-family:"Playfair Display",Georgia,serif; font-size:clamp(43px,3.8vw,62px); font-weight:400; line-height:.98; letter-spacing:-.045em; }
.about-story-copy h2 em { font-style:normal; font-weight:400; }
.about-story-copy p { max-width:500px; margin:10px 0 0; color:rgba(255,255,255,.62); font-size:11px; line-height:1.62; }
.about-story-copy .about-story-lead { margin-top:19px; }

/* ==================== PILASTRI ==================== */
.about-pillars { padding:38px 0 40px; background:var(--av-paper); }
.about-pillars-heading { margin-bottom:15px; }
.about-pillars-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.about-pillar { min-height:165px; padding:8px 42px 8px 20px; position:relative; }
.about-pillar + .about-pillar { border-left:1px solid rgba(139,89,61,.38); padding-left:60px; }
.about-pillar-top { display:flex; align-items:center; gap:12px; }
.about-pillar-number { color:#b87954; font-family:"Playfair Display",Georgia,serif; font-size:13px; }
.about-pillar-line { display:none; }
.about-pillar h3 { margin:10px 0 0; font-family:"Playfair Display",Georgia,serif; font-size:28px; font-weight:400; line-height:1; }
.about-pillar p { max-width:255px; margin:14px 0 0; color:#6e605e; font-size:10px; line-height:1.55; }
.about-pillar a { margin-top:18px; display:inline-flex; gap:11px; align-items:center; color:#342326; font-size:7px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.about-pillar a i { font-style:normal; font-size:13px; }

/* ==================== SOMMELIER ==================== */
.about-sommelier { background:linear-gradient(100deg,#1f0509,#0b0203); color:#fff; }
.about-sommelier-layout { display:grid; grid-template-columns: 42% 58%; min-height:300px; }
.about-sommelier-copy { display:flex; flex-direction:column; justify-content:center; padding:42px 55px 42px 20px; }
.about-sommelier-copy h2 { margin:17px 0 0; max-width:520px; font-family:"Playfair Display",Georgia,serif; font-size:clamp(42px,3.7vw,60px); font-weight:400; line-height:.96; letter-spacing:-.04em; }
.about-sommelier-copy h2 em { display:block; font-style:normal; font-weight:400; }
.about-sommelier-copy p { max-width:430px; margin:17px 0 0; color:rgba(255,255,255,.65); font-size:11px; line-height:1.62; }
.about-arrow-link { margin-top:20px; display:inline-flex; align-items:center; gap:11px; align-self:flex-start; color:#d09a74; font-size:7px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.about-arrow-link i { font-style:normal; font-size:13px; }
.about-sommelier-visual { position:relative; min-height:300px; overflow:hidden; }
.about-sommelier-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.about-sommelier-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(26,5,9,.82),rgba(15,3,5,.12) 42%,rgba(4,1,2,.08)); }
.about-sommelier-monogram { position:absolute; right:10%; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:7px; color:rgba(181,104,63,.5); font-family:"Playfair Display",Georgia,serif; font-size:clamp(70px,6vw,105px); }
.about-sommelier-monogram i { width:2px; height:100px; background:currentColor; transform:rotate(34deg); }

/* ==================== LUOGO ==================== */
.about-place { padding:20px 0 0; background:var(--av-paper); }
.about-place-layout { display:grid; grid-template-columns: 46% 20% 34%; min-height:285px; align-items:stretch; }
.about-place-photo { position:relative; min-height:285px; overflow:hidden; }
.about-place-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.about-place-card { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; min-height:285px; padding:30px 30px; background:linear-gradient(145deg,#3a0d14,#210609); color:#fff; }
.about-place-card h2 { margin:16px 0 0; font-family:"Playfair Display",Georgia,serif; font-size:clamp(35px,3vw,49px); font-weight:400; line-height:.95; letter-spacing:-.04em; }
.about-place-card h2 em { display:block; font-style:normal; font-weight:400; }
.about-place-address { margin-top:21px; display:flex; gap:9px; color:rgba(255,255,255,.72); font-size:9px; line-height:1.55; }
.about-place-address i { margin-top:2px; color:#c17f57; }
.about-place-button { width:fit-content; min-height:37px; margin-top:20px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(208,145,100,.5); color:#fff; font-size:7px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1100px) {
    .about-page { --av-gutter: 22px; }
    .about-intro-layout,.about-philosophy-grid { grid-template-columns:42% 58%; }
    .about-intro-copy { padding-right:35px; }
    .about-pillar + .about-pillar { padding-left:35px; }
}

@media (max-width: 820px) {
    body.page-about main { padding-top: 74px; }
    .about-page { --av-gutter: 13px; }
    .about-intro .about-container,.about-intro-layout { min-height:0; }
    .about-intro-layout,.about-philosophy-grid,.about-story-grid,.about-sommelier-layout { grid-template-columns:1fr; }
    .about-intro-copy { min-height:390px; padding:70px 20px 55px; }
    .about-intro-visual { min-height:390px; }
    .about-intro-curve { height:45px; bottom:-25px; }
    .about-philosophy { padding:70px 0 55px; }
    .about-philosophy-copy { max-width:620px; margin-bottom:45px; }
    .about-philosophy-gallery { height:390px; }
    .about-story-visual,.about-story-copy,.about-sommelier-copy,.about-sommelier-visual { min-height:340px; }
    .about-pillars-grid { grid-template-columns:1fr; }
    .about-pillar { min-height:0; padding:25px 8px; }
    .about-pillar + .about-pillar { border-left:0; border-top:1px solid rgba(139,89,61,.25); padding-left:8px; }
    .about-place-layout { grid-template-columns:1fr; }
    .about-place-photo,.about-place-card { min-height:330px; }
}

@media (max-width: 520px) {
    .about-intro-title { font-size:clamp(52px,16vw,70px); }
    .about-intro-visual { min-height:320px; }
    .about-intro-monogram { top:40px; right:8%; font-size:64px; }
    .about-intro-monogram i { height:68px; }
    .about-philosophy-copy h2 { font-size:clamp(50px,15vw,68px); }
    .about-philosophy-gallery { height:330px; }
    .about-philosophy-photo-main { width:76%; height:280px; }
    .about-philosophy-photo-secondary { width:47%; height:190px; right:0; }
    .about-story-copy { padding:42px 24px; }
    .about-sommelier-copy { padding:45px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-about-reveal] { opacity:1; transform:none; transition:none; }
}