/* =========================================================
   MyNextWine — wine-detail.css
   Page-scoped styling for /wine/{slug}
   (Does NOT change homepage styling)
   ========================================================= */

.winepage{
  background: #fff;
}

/* =========================================================
   Mobile overflow guard rails (page-scoped)
   Prevents tiny “bleeds” (e.g., badge bubbles) from creating horizontal scroll
   ========================================================= */
html, body{ overflow-x: hidden; }
@supports (overflow-x: clip){
  html, body{ overflow-x: clip; }
}

/* Ensure long dynamic strings (producer/region/notes, etc.) never force width overflow */
.wd-title,
.wd-sub,
.wd-kv-name,
.wd-kv-note,
.wd-review-text,
.wd-offer-shop,
.wd-offer-note,
.wd-pair-text{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Let grid/flex children shrink properly (prevents “min-content” overflow in grids) */
.winepage-hero-grid > *,
.winepage-layout > *,
.wd-iconrow > *,
.wd-review-top > *{
  min-width: 0;
}

/* ===== Hero ===== */
.winepage-hero{
  position: relative;
  padding: 32px 0 26px;
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(128,0,32,.10), transparent 60%),
    radial-gradient(700px 240px at 82% 18%, rgba(17,24,39,.06), transparent 65%),
    linear-gradient(to bottom, rgba(249,250,251,.98), rgba(255,255,255,0));
}

.wd-breadcrumbs{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(107,114,128,.95);
  font-weight: 750;
  margin-bottom: 14px;
}
.wd-breadcrumbs a{
  color: rgba(107,114,128,.95);
}
.wd-crumb-sep{ opacity: .6; }

.winepage-hero-grid{
  display:grid;
  /* Same desktop look, but allows the left column to shrink a bit on narrow screens */
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* ===== Media ===== */
.wd-media{ display:flex; flex-direction:column; gap: 14px; }

.wd-bottle{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 16px 46px rgba(0,0,0,.10);
  height: 420px;
}

.wd-bottle-inner{
  width: 100%;
  height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff;
  padding: 18px;
  position: relative;
  cursor: zoom-in;
}

.wd-bottle-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Image expand (page-scoped) */
.winepage .wine-image-wrap.is-expanded{
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 24px;
  background: rgba(0,0,0,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: zoom-out;
}
.winepage .wd-bottle-inner.wine-image-wrap.is-expanded{
  height: auto;
  padding: 0;
  background: transparent;
}
.winepage .wine-image-wrap.is-expanded .zoom-hint{ display:none; }
.winepage .wine-image-wrap.is-expanded img{
  width: auto;
  height: auto;
  max-width: min(92vw, 680px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* Quick rail */
.wd-quick{
  border-radius: 18px;
}
.wd-quick-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.wd-quick-item{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(249,250,251,.9);
}
.wd-quick-k{
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(107,114,128,.95);
  font-weight: 900;
}
.wd-quick-v{
  margin-top: 3px;
  font-size: 14px;
  font-weight: 950;
  color: rgba(17,24,39,.92);
}

/* ===== Head ===== */
.wd-head{ min-width: 0; }

.wd-pills{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.wd-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.85);
  color: rgba(107,114,128,.98);
  font-weight: 900;
  font-size: 12px;
  text-transform: lowercase;
}
.wd-pill-soft{
  background: rgba(128,0,32,.07);
  border-color: rgba(128,0,32,.18);
  color: rgba(128,0,32,.95);
}
.wd-pill-outline{
  background: transparent;
  border-color: rgba(17,24,39,.16);
  color: rgba(17,24,39,.72);
}

.wd-title{
  margin: 0;
  font-size: clamp(30px, 3.0vw, 46px);
  letter-spacing: -.02em;
  line-height: 1.05;
}

.wd-sub{
  margin: 10px 0 0;
  color: rgba(107,114,128,.96);
  font-weight: 750;
}
.wd-sub-strong{
  color: rgba(17,24,39,.92);
  font-weight: 950;
}
.wd-dot{ margin: 0 8px; opacity: .65; }

/* Make tasting note card match media column height (desktop) */
@media (min-width: 981px){
  .winepage-hero-grid{ align-items: stretch; }
  .wd-head{
    display:flex;
    flex-direction:column;
    height: 100%;
  }
  .wd-lead{
    flex: 1;
    display:flex;
    flex-direction:column;
  }
  .wd-lead-text{ flex: 1; }
  .wd-hero-actions{ margin-top: auto; }
}

/* ===== Score + vintages ===== */
.wd-score-row{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: start;
}

.wd-score-badge{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
  padding: 14px 14px 12px;
  min-height: 96px;
}

.wd-score-main{
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: #800020;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}

.wd-score-label{
  margin-top: 10px;
  color: rgba(107,114,128,.95);
  font-weight: 850;
  font-size: 12px;
}

.wd-score-fgf{
  position:absolute;
  right: 12px;
  bottom: 12px;
  display:flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(128,0,32,.22);
  background: rgba(128,0,32,.06);
}
.wd-score-fgf-num{
  font-weight: 950;
  color: #800020;
}
.wd-score-fgf-label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(128,0,32,.85);
}

.wd-vintages{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  padding: 14px 14px 12px;
}

.wd-vintages-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  color: rgba(17,24,39,.88);
  margin-bottom: 6px;
}
.wd-vintages-title i{
  color: rgba(128,0,32,.75);
}

.wd-vintage-raw{
  margin: 0 0 8px;
  color: rgba(107,114,128,.92);
  word-break: break-word;
}

.wd-vintage-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wd-vintage-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  font-weight: 900;
  font-size: 12px;
  color: rgba(17,24,39,.85);
}
.wd-vintage-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(128,0,32,.18);
  background: rgba(128,0,32,.06);
  color: rgba(128,0,32,.95);
  font-weight: 950;
  font-size: 11px;
}

/* ===== Lead card ===== */
.wd-lead{
  margin-top: 14px;
  border-radius: 18px;
  box-shadow: 0 16px 46px rgba(0,0,0,.10);
  border: 1px solid rgba(17,24,39,.10);
}
.wd-lead-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  color: rgba(17,24,39,.88);
  margin-bottom: 10px;
}
.wd-lead-title i{
  color: rgba(128,0,32,.75);
}
.wd-lead-vintage{
  margin-left: auto;
  color: rgba(107,114,128,.95);
  font-weight: 850;
  font-size: 13px;
}
.wd-lead-text{
  margin: 0;
  color: rgba(17,24,39,.78);
  font-weight: 650;
  line-height: 1.7;
}
.wd-hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ===== Layout ===== */
.winepage-layout{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}
.winepage-side{
  position: sticky;
  top: 92px; /* below sticky nav */
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.wd-side-card{
  border-radius: 18px;
  border-width: 1px;
}
.wd-side-title{
  display:flex;
  gap: 10px;
  align-items:center;
  font-weight: 950;
  color: rgba(17,24,39,.90);
}
.wd-side-title i{
  color: rgba(128,0,32,.75);
}

/* ===== Sections ===== */
.wd-section{ margin-bottom: 22px; }
.wd-section-head{ margin: 0 0 10px; }
.wd-h2{
  margin: 0;
  font-size: 20px;
  letter-spacing: -.01em;
  display:flex;
  align-items:center;
  gap: 10px;
}
.wd-h2 i{ color: rgba(128,0,32,.75); }
.wd-h2-sub{
  margin: 6px 0 0;
  color: rgba(107,114,128,.96);
  font-weight: 650;
}

/* Icon-left + box layout */
.wd-iconrow{
  display:grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
}
.wd-iconcell{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(128,0,32,.07);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.wd-iconcell i{
  color: rgba(128,0,32,.75);
  font-size: 18px;
}

/* Two-column rows (name left, note right) */
.wd-kv-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.wd-kv-row{
  display:grid;
  /* Keeps desktop proportions, but prevents squeeze-overflow on mid-size phones/tablets */
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(249,250,251,.9);
}
.wd-kv-name{
  font-weight: 950;
  color: rgba(17,24,39,.90);
  font-size: 13px;
}
.wd-kv-note{
  color: rgba(17,24,39,.78);
  font-weight: 650;
  line-height: 1.55;
  font-size: 13px;
}

/* ===== Chips ===== */
.wd-chip-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wd-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(249,250,251,.9);
  font-weight: 900;
  color: rgba(17,24,39,.86);
  font-size: 13px;
}

/* ===== Origin grid ===== */
.wd-origin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wd-origin-title{
  font-weight: 950;
  color: rgba(17,24,39,.90);
  margin-bottom: 10px;
}
.wd-origin-line{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(249,250,251,.9);
  margin-bottom: 10px;
}
.wd-origin-k{
  color: rgba(107,114,128,.95);
  font-weight: 850;
  font-size: 13px;
}
.wd-origin-v{
  color: rgba(17,24,39,.90);
  font-weight: 950;
  font-size: 13px;
  text-align: right;
}

.wd-origin-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wd-producer-name{
  margin: 0 0 10px;
  font-weight: 950;
  color: rgba(17,24,39,.92);
  font-size: 16px;
}
.wd-producer-note{
  margin: 0;
  color: rgba(17,24,39,.78);
  font-weight: 650;
  line-height: 1.7;
}

/* Facts */
.wd-facts{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.wd-fact{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(249,250,251,.9);
}
.wd-fact-k{
  display:block;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(107,114,128,.95);
  font-weight: 900;
}
.wd-fact-v{
  margin-top: 3px;
  font-size: 13px;
  font-weight: 950;
  color: rgba(17,24,39,.90);
}

/* ===== Word clouds ===== */
.wd-cloud-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.wd-cloud-title{
  font-weight: 950;
  color: rgba(17,24,39,.90);
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.wd-cloud-title i{ color: rgba(128,0,32,.75); }

.wd-cloud-box{
  height: 260px;
  border-radius: 18px;
  border: 1px dashed rgba(128,0,32,.35);
  background: rgba(249,250,251,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
  overflow:hidden;

  /* overflow hardening */
  box-sizing: border-box;
  max-width: 100%;
}

/* SVGs can create “layout width” even when visually clipped; force them to behave */
.wd-cloud-box svg{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
.wd-cloud-empty{
  color: rgba(107,114,128,.95);
  font-weight: 800;
  font-size: 13px;
}

/* ===== Reviews ===== */
.wd-review{
  margin-bottom: 12px;
  border-radius: 18px;
}

.wd-review-top{
  display:grid;
  grid-template-columns: 78px 1fr auto;
  gap: 12px;
  align-items: center;
}

.wd-review-score{
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  background: #800020;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.wd-review-score-main{ font-size: 18px; }
.wd-review-score-fgf{
  position:absolute;
  right: -6px;
  bottom: -6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #800020;
  color: #800020;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 12px;
}

.wd-review-meta{ min-width: 0; }
.wd-review-who{
  font-weight: 950;
  color: rgba(17,24,39,.90);
}
.wd-review-when{
  font-size: 13px;
  color: rgba(107,114,128,.96);
  font-weight: 750;
}
.wd-review-text{
  margin: 12px 0 0;
  color: rgba(17,24,39,.78);
  font-weight: 650;
  line-height: 1.7;
}

.wd-desc-wrap{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.wd-desc-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}
.wd-desc-k{
  font-weight: 950;
  color: rgba(107,114,128,.96);
  margin-right: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wd-desc-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(249,250,251,.9);
  font-weight: 850;
  color: rgba(17,24,39,.84);
  font-size: 12px;
}

/* ===== Pairings ===== */
.wd-pair{
  margin-bottom: 12px;
  border-radius: 18px;
}
.wd-pair-top{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
.wd-pair-score{
  font-weight: 950;
  color: #800020;
  background: rgba(128,0,32,.08);
  border: 1px solid rgba(128,0,32,.18);
  padding: 8px 10px;
  border-radius: 12px;
}
.wd-pair-text{
  margin: 10px 0 0;
  color: rgba(17,24,39,.78);
  font-weight: 650;
  line-height: 1.7;
}

/* ===== Offers ===== */
.wd-offers{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.wd-offer{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  padding: 12px 12px 10px;
  background: rgba(249,250,251,.65);
}
.wd-offer-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;          /* prevents overflow when shop name is long */
  row-gap: 6px;
}
.wd-offer-shop{
  font-weight: 950;
  color: rgba(17,24,39,.90);
  min-width: 0;
  flex: 1 1 220px;          /* allows wrapping instead of forcing width */
}
.wd-offer-price{
  font-weight: 950;
  color: #800020;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;        /* keeps price right-aligned on wide screens */
}
.wd-offer-note{
  margin: 8px 0 0;
  color: rgba(107,114,128,.96);
  font-weight: 650;
  line-height: 1.55;
}
.wd-offer-badge{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  font-weight: 900;
  font-size: 12px;
  color: rgba(17,24,39,.78);
}

/* Modal polish (scoped) */
.winepage-modal{
  border-radius: 18px;
}
.winepage-modal p{
  color: rgba(17,24,39,.78);
  font-weight: 650;
  line-height: 1.7;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .winepage-hero-grid{
    grid-template-columns: 1fr;
  }
  .wd-bottle-inner{
    height: 380px;
  }
  .wd-bottle{
    height: 380px;
  }
  .wd-score-row{
    grid-template-columns: 1fr;
  }
  .winepage-layout{
    grid-template-columns: 1fr;
  }
  .winepage-side{
    position: static;
  }
  .wd-origin-grid{
    grid-template-columns: 1fr;
  }
  .wd-cloud-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 740px){
  .wd-review-top{
    grid-template-columns: 78px minmax(0, 1fr);
  }
  .wd-review-actions{
    grid-column: 1 / -1;
  }

  /* Producer • Region • Country line wraps cleanly on small screens */
  .wd-sub{
    display:flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: baseline;
  }
  .wd-dot{ margin: 0 4px; }
}

/* Store badges should never force horizontal overflow */
.store-img img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Wine overall mini score badge in tasting note header */
.wd-wine-mini{ margin-left:auto; }

.wd-review-score--mini{
  width: 54px;
  height: 54px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.wd-review-score--mini .wd-review-score-main{ font-size: 14px; }
.wd-review-score--mini .wd-review-score-fgf{
  width: 22px;
  height: 22px;
  font-size: 11px;
  right: -5px;
  bottom: -5px;
}

/* ===== Image Lightbox ===== */
.mnw-imglb[aria-hidden="true"]{ display:none; }
.mnw-imglb{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mnw-imglb__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
}
.mnw-imglb__img{
  position: relative;
  z-index: 1;
  max-width: min(92vw, 680px);
  max-height: 92vh;
  object-fit: contain;
  background: #fff;
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.mnw-imglb__close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mnw-imglb__close:hover{ background: rgba(0,0,0,.5); }

@media (max-width: 520px){
  .wd-bottle-inner{ height: 340px; }
  .wd-bottle{ height: 340px; }
  .wd-review-top{
    grid-template-columns: 78px 1fr;
  }
  .wd-review-actions{
    grid-column: 1 / -1;
  }
  .wd-kv-row{
    grid-template-columns: 1fr;
  }
}