/* Isolated audit repair layer. */

/* AUD-35: between 1001px and 1100px the wordmark and the desktop links meet with
   no clear space, so the existing hamburger and external picker take over there.
   repairs-ui.js adds html.compact-nav when the fitted header runs out of room at
   any width, for example with enlarged text on a laptop. */
@media(max-width:1100px){
  .nav-links{display:none}
  nav .lang-switch{display:none}
  nav .nav-right{gap:.5rem;flex-shrink:0}
  nav .mobile-language{display:block}
  .hamburger{display:flex}
}
html.compact-nav .nav-links{display:none}
html.compact-nav nav .lang-switch{display:none}
html.compact-nav nav .nav-right{gap:.5rem;flex-shrink:0}
html.compact-nav nav .mobile-language{display:block}
html.compact-nav .hamburger{display:flex}

/* The compact header controls keep their touch sizing and picker styling outside
   the original max-width:1000px block, so they also work at 1001-1100px and at
   laptop widths under html.compact-nav. */
.hamburger{width:44px;height:44px;align-items:center;justify-content:center;padding:0}
nav .mobile-language{position:relative}
nav .mobile-language summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:.5rem;min-width:60px;min-height:44px;padding:.5rem .65rem;border:1px solid currentColor;border-radius:3px;font-size:.75rem;letter-spacing:.08em;font-weight:400;cursor:pointer}
nav .mobile-language summary::-webkit-details-marker{display:none}
nav .mobile-language summary::after{content:'';width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
nav .mobile-language[open] summary::after{transform:translateY(2px) rotate(225deg)}
nav .mobile-language-options{position:absolute;top:calc(100% + .5rem);right:0;min-width:152px;padding:.35rem;background:var(--cream);color:var(--ink);border:1px solid rgba(30,27,24,.15);box-shadow:0 8px 24px rgba(20,14,12,.18);border-radius:3px;z-index:120}
nav .mobile-language-options a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:.6rem .75rem;font-size:.85rem;font-weight:400;white-space:nowrap}
.mobile-menu .lang-switch{display:flex}

/* AUD-36: on landscape tablets the mark and the eyebrow line share the same band.
   Reserving height for both keeps them apart without touching the 1366/1440
   laptop composition or the mark itself. */
@media(max-width:1100px) and (min-width:1001px) and (max-height:820px){
  .q-watermark{top:26%;height:32vh;min-height:170px;max-height:320px}
}

/* AUD-33/45/46: at the narrowest widths a bottle keeps its intrinsic width and
   pushes its grid column past the viewport. The columns now allow a zero minimum
   and the bottles scale inside them. */
@media(max-width:820px){
  .op-hero{grid-template-columns:minmax(0,1fr)}
  .op-hero .bottle-stage{height:auto;min-width:0;padding-bottom:0}
  .op-hero .bottle-stage img{width:auto;max-width:100%;height:auto;max-height:440px;margin:0 auto}
  .wine-row{grid-template-columns:minmax(0,1fr)}
  .wine-row .bottle-stage{height:auto;min-width:0}
  .wine-row .bottle-stage img{width:auto;max-width:100%;height:auto;max-height:400px;margin:0 auto}
  .trade-grid{grid-template-columns:minmax(0,1fr)}
  .trade-card{min-width:0;flex-wrap:wrap}
  .trade-card>div{min-width:0}
}
@media(max-width:900px){
  .score-grid{grid-template-columns:minmax(0,1fr)}
  .score-card .bottle-stage{min-width:0}
  .score-card .bottle-stage img{max-width:100%}
  .post-grid{grid-template-columns:minmax(0,1fr)}
}

/* Long wine names, headlines and card titles wrap inside their column instead of
   setting a wider minimum, at reading sizes only. */
@media(max-width:520px){
  .op-hero h1,.wine-info h3,.dec-page h1,.post-card h3,.trade-card h3,.op-simple h1,.press-cat .t{overflow-wrap:break-word}
  .trade-card{padding:1.4rem;gap:1rem}
  .dec-page{padding:1.2rem}
  .breadcrumb{overflow-wrap:break-word}
}

/* AUD-37: in the single-column journal layout the fixed short frame cut the
   owners photograph through their faces. A taller frame and a face-safe focal
   point keep the original picture intact. */
@media(max-width:900px){
  .post-card .pimg{height:auto;aspect-ratio:3/2}
  .post-card .pimg img{object-position:50% 30%}
  .post-card .pimg img[src*="serena-andrea-fiera"]{object-position:50% 22%}
}

/* Enlarged text may move the existing controls onto a second row, without
   shrinking text or hiding controls. Normal-size header geometry is unchanged. */
@media(max-width:1100px){
  nav{flex-wrap:wrap;row-gap:.5rem}
  nav .nav-logo{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  nav .nav-right{margin-left:auto}
  nav .mobile-language-options{width:max-content;max-width:calc(100vw - 2rem - 44px - .5rem)}
  nav .mobile-language-options a{white-space:normal;overflow-wrap:anywhere}
}
/* Preserve each original anchor offset unless the enlarged header needs more. */
html section[id]{scroll-margin-top:var(--ugo-header-clearance,0px)}
@media(max-width:767px){html section[id]{scroll-margin-top:max(5rem,var(--ugo-header-clearance,0px))}}
html section.unesco-gallery{scroll-margin-top:max(5rem,var(--ugo-header-clearance,0px))}
html #richiesta{scroll-margin-top:max(6.5rem,var(--ugo-header-clearance,0px))}
@media(min-width:768px){html section.technical-downloads,html section.bottle-downloads{scroll-margin-top:max(6rem,var(--ugo-header-clearance,0px))}}

/* Body reflow with 200% text: long words, letter-spaced labels and grid or flex
   children set a min-content wider than a phone. Words break only when they
   cannot fit their line, and the children may shrink to their column, so the
   normal-size layout is unchanged. */
body{overflow-wrap:break-word}
.grid-2>*,.press-cats>*,.post-grid>*,.score-grid>*,.wine-row>*,.op-hero>*,.facts>*,.trade-grid>*,.trade-card>div,.dec-score>div:not(.n){min-width:0}
.t-form .submit,.nl-form button,.dec-link{max-width:100%}
.btn-scheda{overflow-wrap:anywhere}
/* Vintage tables are measured against their own text size. Under 19em, which at
   normal size is only reached below the existing 350px rule, they take that same
   narrow treatment. Under 14em, which only enlarged text reaches, headings and
   review cells may hyphenate or break, while the vintage year stays whole. */
main:has(>.vintage-table){container-type:inline-size}
@container (max-width:19em){
  .vintage-table th,.vintage-table td{padding:.7rem .4rem}
  .vintage-table th{letter-spacing:.08em}
}
@container (max-width:14em){
  .vintage-table th,.vintage-table td:not(:first-child){overflow-wrap:anywhere;hyphens:auto}
  .vintage-table td:first-child{overflow-wrap:normal;white-space:nowrap}
}
/* Keyboard focus scrolls a control clear of the fixed header: 5rem matches the
   single-row bar at any text size, and the wrapped bar publishes its height. */
:is(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])){scroll-margin-top:max(5rem,var(--ugo-header-clearance,0px))}