/* Birra Tirana: liquid glass material and inner-page components (loaded after home.css) */

/* ---------- LIQUID GLASS ----------
   Used only on controls that float over photos or gradients (nav, hero label, ghost buttons, pills on photos, form panels).
   Never on flat backgrounds, never glass on glass. The specular highlight follows the pointer (--mx/--my, set in site.js). */
:where(.glass) { position: relative; }
.glass {
  isolation: isolate;
  color: var(--on-dark);
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.06) 42%, rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.06);
  backdrop-filter: blur(16px) saturate(180%) brightness(1.06);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), inset 0 -1px 0 rgba(255,255,255,.10), inset 0 0 22px rgba(255,255,255,.06), 0 14px 34px -16px rgba(0,0,0,.6);
}
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at var(--mx, 25%) var(--my, 0%), rgba(255,255,255,.32), rgba(255,255,255,0) 58%);
  mix-blend-mode: screen;
}
.btn--ghost.glass { border-color: rgba(255,255,255,.34); }
.btn--ghost.glass:hover { color: var(--bt-gold-300); border-color: rgba(223,193,87,.7); }
.sticker.glass { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), rgba(12,119,59,.35) 60%); color: var(--bt-foam-50); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav[data-state="scrolled"] { background: rgba(6,46,24,.9); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .nav[data-state="scrolled"] { background: var(--bt-green-900); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before { display: none; }
}
@media (prefers-contrast: more) { .glass { border-color: rgba(255,255,255,.75); } }

.link-arrow--light { color: var(--bt-gold-300); }

/* Mini year row (home history teaser) */
.mini-years { list-style: none; margin: 0; padding: var(--s-4) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); width: 100%; border-top: 1px solid var(--bt-line); }
.mini-years li { display: grid; gap: 2px; }
.mini-years b { font-family: var(--font-display); font-size: var(--fs-28); color: var(--bt-green-700); font-variant-numeric: tabular-nums; }
.mini-years span { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .mini-years { grid-template-columns: repeat(2, 1fr); } }

/* Where to buy: glass panel over a photo */
.find { position: relative; overflow: hidden; padding-block: var(--s-9); background: var(--bt-green-950); isolation: isolate; }
.find__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(1.1) brightness(.7); }
.find::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,33,15,.75), rgba(4,33,15,.15)); }
.find__card { max-width: 560px; padding: var(--s-7) var(--s-6); border-radius: 24px; display: grid; gap: var(--s-3); }
.find__card h2 { font-size: var(--fs-48); color: var(--on-dark); }
.find__card p:not(.eyebrow) { color: rgba(243,245,234,.86); }
.find__row { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.find__row input { flex: 1 1 220px; min-width: 0; min-height: 52px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.35); background: rgba(4,33,15,.35); color: var(--on-dark); padding: 0 20px; font: 400 var(--fs-16) var(--font-body); }
.find__row input::placeholder { color: rgba(243,245,234,.7); }
.find__row input:focus { outline: none; border-color: var(--bt-gold-500); box-shadow: 0 0 0 4px rgba(223,193,87,.2); }

/* Page hero (inner pages) */
.phero { position: relative; overflow: hidden; isolation: isolate; color: var(--on-dark); background: var(--bt-green-950); min-height: clamp(460px, 62vh, 640px); display: flex; align-items: flex-end; padding-block: calc(120px + env(safe-area-inset-top, 0px)) var(--s-8); }
.phero--short { min-height: clamp(380px, 48vh, 520px); }
.phero__bg { position: absolute; inset: -6% 0 0; width: 100%; height: 112%; max-width: none; object-fit: cover; z-index: -2; filter: saturate(1.05) brightness(.62); }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,33,15,.35) 0%, rgba(4,33,15,.15) 40%, rgba(4,33,15,.92) 100%); }
.phero__inner { display: grid; gap: var(--s-4); justify-items: start; }
.phero h1 { font-size: var(--fs-96); line-height: .98; color: var(--on-dark); max-width: 14ch; }
.phero__lead { font-size: var(--fs-18); max-width: 58ch; color: rgba(243,245,234,.86); }
.phero--gold { background: var(--bt-gold-500); color: var(--bt-green-950); }
.phero--gold::after { display: none; }
.phero--gold h1 { color: var(--bt-green-950); }
.phero--gold .phero__lead { color: var(--bt-green-900); }
.crumbs { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--r-pill); }
.crumbs a { text-decoration: none; opacity: .85; }
.crumbs a:hover { opacity: 1; text-decoration: underline; }
.crumbs > *:not(:last-child)::after { content: "/"; margin-left: 10px; opacity: .5; }
.crumbs--plain { padding: 0; margin-bottom: var(--s-4); color: inherit; }

/* Product catalogue */
.catalog { padding-block: var(--s-8) var(--s-9); background: var(--bt-green-950); color: var(--on-dark); }
.catalog__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-7); }
.catalog__note { font-size: 13px; color: var(--on-dark-muted); }
.catalog__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.product { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-card); border: 1px solid rgba(223,193,87,.16); background: linear-gradient(180deg, rgba(12,119,59,.22), rgba(12,119,59,.05)); min-width: 0; }
.product__stage { position: relative; margin: 0; display: grid; place-items: center; min-height: 280px; }
.product__stage img { position: relative; max-height: 280px; width: auto; filter: drop-shadow(0 24px 22px rgba(0,0,0,.45)); transition: transform var(--t-slow) var(--ease-foam); }
.product:hover .product__stage img { transform: rotate(-4deg) translateY(-8px); }
.product:hover .pcard__cap { transform: rotate(40deg) scale(1.12); opacity: .32; }
.product--red .pcard__cap { background: repeating-conic-gradient(var(--bt-kuqalashe-red) 0 6deg, #e0525d 6deg 12deg); }
.product__body { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.product__body h2 { font-size: var(--fs-36); color: var(--on-dark); }
.product__body > p:not(.pcard__kind) { color: var(--on-dark-muted); font-size: var(--fs-14); }
.specs { margin: var(--s-2) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(223,193,87,.18); border-radius: 10px; overflow: hidden; }
.specs > div { background: var(--bt-green-950); padding: 10px 12px; min-width: 0; }
.specs > div:last-child { grid-column: 1 / -1; }
.specs dt { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bt-gold-500); }
.specs dd { margin: 2px 0 0; font-size: var(--fs-14); color: var(--on-dark); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .catalog__list { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .product { grid-template-columns: 1fr; } .product__stage { min-height: 240px; } .product__stage img { max-height: 240px; } }

/* History page */
.story { padding-block: var(--s-9); }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s-8); align-items: start; }
.story__intro { position: sticky; top: 110px; display: grid; gap: var(--s-4); }
.story__intro h2 { color: var(--bt-green-800); font-size: var(--fs-48); }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); border-left: 1px solid var(--bt-gold-700); }
.chapter { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); padding-left: var(--s-5); position: relative; }
.chapter::before { content: ""; position: absolute; left: -7px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--bt-foam-50); border: 2px solid var(--bt-gold-700); }
.chapter:last-child::before { background: var(--bt-gold-500); }
.chapter > b { font-family: var(--font-display); font-size: var(--fs-48); line-height: 1; color: var(--bt-green-700); font-variant-numeric: tabular-nums; }
.chapter h3 { color: var(--bt-green-800); margin-bottom: var(--s-2); }
.chapter p { color: var(--muted); }
.chapter p + p { margin-top: var(--s-3); }
.values { background: var(--bt-green-900); color: var(--on-dark); padding-block: var(--s-9); }
.values__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.values__head h2 { color: var(--on-dark); }
.values__head .lede { color: var(--on-dark-muted); }
.values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-5); }
.value { border-top: 2px solid var(--bt-gold-500); padding-top: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.value h3 { color: var(--bt-gold-300); }
.value p { color: var(--on-dark-muted); font-size: var(--fs-14); }
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__intro { position: static; }
  .chapter { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* Serving and tasting guide */
.guide { padding-block: var(--s-9); }
.guide__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-8); align-items: start; }
.guide__intro { display: grid; gap: var(--s-4); }
.guide__intro h2 { color: var(--bt-green-800); font-size: var(--fs-48); }
.guide__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: g; }
.guide__steps li { counter-increment: g; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-card); background: #fff; border: 1px solid var(--bt-line); }
.guide__steps li::before { content: counter(g); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bt-green-700); color: var(--bt-gold-300); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-18); }
.guide__steps h3 { color: var(--bt-green-800); }
.guide__steps p { color: var(--muted); font-size: var(--fs-14); }
.guide__photo { margin: var(--s-8) auto 0; width: calc(100% - 40px); max-width: calc(var(--content) - 40px); aspect-ratio: 21 / 8; }
.guide--dark { background: var(--bt-green-950); color: var(--on-dark); }
.guide--dark .guide__intro h2 { color: var(--on-dark); }
.guide--dark .lede { color: var(--on-dark-muted); }
.guide--dark .guide__steps li { background: rgba(12,119,59,.14); border-color: rgba(223,193,87,.18); }
.guide--dark .guide__steps h3 { color: var(--bt-gold-300); }
.guide--dark .guide__steps p { color: var(--on-dark-muted); }
@media (max-width: 900px) { .guide__grid { grid-template-columns: 1fr; } .guide__photo { aspect-ratio: 4 / 3; } }

/* Careers */
.dept { display: grid; gap: var(--s-4); }
.dept__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.dept__list li { padding: var(--s-4) var(--s-5); border-radius: var(--r-card); border: 1px solid var(--bt-line); background: #fff; display: grid; gap: 4px; }
.dept__list h3 { color: var(--bt-green-800); font-size: var(--fs-18); }
.dept__list span { font-size: 13px; color: var(--muted); }
.dept__note { font-size: var(--fs-14); color: var(--muted); }
.apply { padding-block: var(--s-9); background: var(--bt-foam-100); }
.apply__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.apply h2 { color: var(--bt-green-800); margin-bottom: var(--s-4); }
.select { font-weight: 700; color: var(--bt-green-800); user-select: all; }
@media (max-width: 900px) { .apply__grid { grid-template-columns: 1fr; } }

/* Forms */
.form { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: 20px; background: #fff; border: 1px solid var(--bt-line); min-width: 0; }
.form__row { display: grid; gap: 6px; }
.form label, .form legend { font-size: 13px; font-weight: 700; color: var(--bt-ink-900); }
.form input:not([type="radio"]), .form select, .form textarea { width: 100%; min-height: 48px; border-radius: 10px; border: 1.5px solid var(--bt-line); background: var(--bt-foam-50); color: var(--bt-ink-900); padding: 10px 14px; font: 400 var(--fs-16) var(--font-body); }
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--bt-green-700); box-shadow: 0 0 0 4px rgba(12,119,59,.15); }
.form [aria-invalid="true"] { border-color: #b3261e; }
.form__toggle { border: 0; margin: 0; padding: 0; display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; }
.form__toggle legend { margin-bottom: 6px; width: 100%; }
.form__toggle label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.form__toggle input { accent-color: var(--bt-green-700); width: 18px; height: 18px; }
.form .btn { justify-self: start; }
.form__status { font-size: var(--fs-14); color: var(--bt-green-800); min-height: 1.4em; }

/* Contact */
.contact { position: relative; isolation: isolate; overflow: hidden; background: var(--bt-green-950); padding-block: calc(130px + env(safe-area-inset-top, 0px)) var(--s-9); }
.contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; filter: brightness(.55) saturate(1.1); }
.contact::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(4,33,15,.85), rgba(4,33,15,.3)); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.contact__info { padding: var(--s-7) var(--s-6); border-radius: 24px; display: grid; gap: var(--s-4); }
.contact__info h1 { font-size: var(--fs-64); color: var(--on-dark); }
.contact__info > p { color: rgba(243,245,234,.86); }
.contact__list { margin: 0; display: grid; gap: var(--s-4); }
.contact__list dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bt-gold-300); }
.contact__list dd { margin: 2px 0 0; font-size: var(--fs-18); color: var(--on-dark); }
.contact__list a { text-decoration: none; }
.form--card { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* Responsible drinking */
.tips { padding-block: var(--s-9); }
.tips__list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); counter-reset: t; }
.tips__list li { counter-increment: t; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-card); background: #fff; border: 1px solid var(--bt-line); }
.tips__list li::before { content: counter(t, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-36); line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--bt-gold-700); }
.tips__list h2 { font-size: var(--fs-22); color: var(--bt-green-800); }
.tips__list p { color: var(--muted); font-size: var(--fs-14); }
@media (max-width: 760px) { .tips__list { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band { background: var(--bt-green-800); color: var(--on-dark); padding-block: var(--s-7); }
.cta-band__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.cta-band__inner > div { display: grid; gap: 4px; }
.cta-band h2 { font-size: var(--fs-36); color: var(--on-dark); }
.cta-band p { color: var(--on-dark-muted); }

/* Distributors page */
.where--page { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
.where--page h1 { font-size: var(--fs-64); color: var(--on-dark); }
.where--page .crumbs { color: var(--on-dark-muted); }

/* News */
.news--page { padding-top: var(--s-8); }
.chips--light .chip { color: var(--bt-ink-900); border-color: var(--bt-line); background: #fff; }
.chips--light .chip:hover { border-color: var(--bt-green-700); }
.chips--light .chip[aria-pressed="true"] { background: var(--bt-green-700); color: var(--bt-foam-50); border-color: var(--bt-green-700); }
.news__grid--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post__tag { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); }
.post__text { font-size: var(--fs-14); color: var(--muted); }
.post__meta span { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
@media (max-width: 1000px) { .news__grid--page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .news__grid--page { grid-template-columns: 1fr; } }

/* Cookie consent: a glass card over the page, bottom right (bottom on phones) */
.consent { position: fixed; z-index: 70; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100vw - 32px)); padding: var(--s-5); border-radius: 20px; display: grid; gap: var(--s-3); background: linear-gradient(135deg, rgba(10,79,41,.82), rgba(4,33,15,.78)); }
.consent__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-22); color: var(--bt-gold-300); }
.consent p:not(.consent__title) { font-size: var(--fs-14); color: rgba(243,245,234,.88); }
.consent__btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.consent__btns .btn { min-height: 42px; }
.footer__link { all: unset; cursor: pointer; color: var(--on-dark); width: max-content; }
.footer__link:hover { color: var(--bt-gold-300); }
.footer__link:focus-visible { outline: 3px solid var(--bt-gold-500); outline-offset: 3px; }