/* WYNEATLAS — REGIONAL A4 GUIDES */
/* Logo, breadcrumb, language selector and footer: atlas.css */

:root {
  --green:#6D7A52;
  --grey:#707070;
  --dark:#202020;
  --wine:#7D2732;
  --line:#E5E7E1;
  --soft:#F6F7F4;
}

* { box-sizing:border-box; }

html,body { margin:0;padding:0; }

body {
  background:#eee;
  color:var(--dark);
  font-family:Arial,Helvetica,sans-serif;
}

/* =====================================
   A4 PAGE
   ===================================== */

.page {
  width:210mm;
  height:297mm;
  margin:12mm auto;
  padding:10mm 10mm 5mm;
  background:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.12);
}

/* =====================================
   HEADER LAYOUT
   ===================================== */

/* Component appearance comes from atlas.css. */

.atlas-page-brand {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:58px;
}

.meta .atlas-breadcrumb {
  width:auto;
  flex:1;
  padding:8px 0 0;
}

.kicker {
  text-align:center;
  color:var(--grey);
  font-size:8pt;
  margin:4px 0 10px;
}

.rule {
  margin-bottom:8px;
}

/* =====================================
   PAGE METADATA
   ===================================== */

.meta {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
}

.section {
  text-align:left;
  color:var(--wine);
  font-weight:700;
  font-size:10pt;
  white-space:nowrap;
}

.page-no {
  text-align:left;
  color:var(--grey);
  font-size:7pt;
  margin-top:5px;
}

/* =====================================
   REGION HEADING
   ===================================== */

.region-title {
  text-align:center;
  font-size:20pt;
  margin:12px 0 4px;
}

.region-intro {
  text-align:center;
  color:var(--grey);
  font-size:8.5pt;
  margin:0 0 15px;
}

/* =====================================
   PAGE 1 — MAP AND CHARACTER FACTORS
   ===================================== */

.region-layout {
  display:grid;
  grid-template-columns:39% minmax(0,1fr);
  gap:13mm;
  align-items:start;
  margin-top:12px;
}

.region-map {
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
}

.region-map img {
  display:block;
  width:100%;
  height:150mm;
  object-fit:contain;
}

.map-caption {
  text-align:center;
  color:var(--grey);
  font-size:7pt;
  line-height:1.4;
  margin:8px 0 0;
}

.map-legend {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:12px;
  font-size:7pt;
  color:var(--grey);
}

.map-legend span {
  display:flex;
  align-items:center;
  gap:7px;
}

.legend-colour {
  width:11px;
  height:11px;
  flex:none;
  display:inline-block;
}

.legend-aop { background:var(--green); }
.legend-grand-cru { background:#C39382; }

/* =====================================
   CHARACTER FACTORS
   ===================================== */

.factors {
  display:flex;
  flex-direction:column;
  gap:13px;
  min-width:0;
}

.factor {
  padding-bottom:12px;
  border-bottom:1px solid rgba(109,122,82,.30);
}

.factor:last-child { border-bottom:0; }

.factor h2 {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 9px;
  color:var(--green);
  font-size:12pt;
  font-weight:700;
}

.factor-icon {
  width:26px;
  height:26px;
  flex:none;
  fill:none;
  stroke:var(--green);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.factor ul {
  margin:0;
  padding-left:15px;
  color:#333;
  font-size:8pt;
  line-height:1.45;
}

.factor li { margin-bottom:5px; }

/* =====================================
   PAGE 2 — GRAPE VARIETIES
   ===================================== */

.grapes {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  row-gap:14px;
  margin:15px 0 0;
}

.grape-summary {
  padding:0 9px;
  border-left:1px solid var(--line);
  min-height:68mm;
}

.grape-summary:nth-child(4n+1) {
  border-left:0;
}

.grape-summary h2 {
  font-size:12pt;
  margin:0 0 7px;
  text-align:center;
}

.label {
  color:var(--green);
  font-size:7pt;
  font-weight:700;
  margin:14px 0 8px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(109,122,82,.35);
}

.grape-summary .label {
  text-align:center;
}

.grape-summary p {
  font-size:8pt;
  line-height:1.52;
  color:var(--grey);
  margin:0;
}

.wine-styles {
  font-size:8pt;
  line-height:1.45;
  margin-top:12px;
  padding:9px 0;
  border-top:1px solid var(--line);
}

/* =====================================
   SHARED FOOTER — A4 POSITIONING ONLY
   ===================================== */

/* Footer appearance is defined in atlas.css. */

.page > .atlas-footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:58mm;
  min-height:0;
}

/* =====================================
   PAGE ACTIONS
   ===================================== */

.atlas-page-actions {
  position:absolute;
  left:10mm;
  right:10mm;
  bottom:61mm;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding-top:2px;
  border-top:1px solid var(--line);
  z-index:2;
}

.atlas-page-actions a,
.atlas-page-actions button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 2px;
  border:0;
  background:transparent;
  color:var(--green);
  font:500 8.5pt Arial,Helvetica,sans-serif;
  text-decoration:none;
  cursor:pointer;
}

.atlas-page-actions a:hover,
.atlas-page-actions button:hover {
  text-decoration:underline;
}

.atlas-page-actions .action-divider {
  height:13px;
  border-left:1px solid var(--line);
}

/* =====================================
   PRINT — NATIVE BROWSER DIALOG
   ===================================== */

@page {
  size:A4;
  margin:0;
}

@media print {
  html,body {
    margin:0;
    padding:0;
    background:white;
  }

  .atlas-language-arrow,
  .atlas-language-menu,
  .atlas-page-actions {
    display:none !important;
  }

  .page {
    width:210mm;
    height:297mm;
    min-height:0;
    margin:0;
    box-shadow:none;
    break-after:page;
    page-break-after:always;
  }

  .page:last-child {
    break-after:auto;
    page-break-after:auto;
  }

  .atlas-footer {
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }
}

/* =====================================
   SMALL SCREENS
   ===================================== */

@media screen and (max-width:820px) {
  body {
    overflow-x:auto;
  }
}