/* ==========================================================================
   Region pages — hero + informations
   Refined / editorial direction to match the comp.
   ========================================================================== */

:root {
    /* Swap --region-serif / --region-sans to your site fonts if you prefer. */
    --region-serif:      'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    --region-sans:       inherit;            /* uses the theme body font */
    --region-ink:        #262420;
    --region-muted:      #8d8a85;
    --region-line:       #e4ded5;
    --region-panel:      #f5efe6;            /* beige info panel */
    --region-hero-panel: rgba(250, 248, 244, 0.8);
    --region-letter:     #cfc8bd;            /* big light R / B */
    --region-maxw:       1240px;
}

/* ---------- Section 1: hero ---------- */
.region-hero {
    position: relative;
    min-height: 460px;
    background-color: #3a3a32;               /* fallback if no image */
    background-size: cover;
    background-position: center;
    margin-bottom: 64px;                     /* room for the overlapping panel */
}

.region-hero__panel {
    position: absolute;
    left: 50%;
    bottom: -44px;
    transform: translateX(-50%);
    width: min(92%, var(--region-maxw));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 44px 40px 44px;
    background: var(--region-hero-panel);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

.region-hero__eyebrow {
    display: block;
    font-family: "Work Sans", serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 14px;
    color: var(--region-ink);
    font-weight: 600;
}

.region-hero__name {
    margin: 0;
    font-family: var(--region-serif);
    font-weight: 600;
    font-size: 60px;
    line-height: 0.8;
    color: var(--region-ink);
    padding-bottom: 40px;
    font-style:italic;
}

.region-hero__name {
  text-transform: lowercase;
}
.region-hero__name::first-letter {
  text-transform: uppercase;
}


.region-hero__compass {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
        margin-bottom: 20px;
}

/* ---------- Section 2: informations ---------- */
.region-info, .region-wines, .region-winemakers {
    width: min(92%, var(--region-maxw));
    margin: 0 auto;
    padding: 0px 0 0px;
    margin-top: -20px;
}

.region-wines {
    padding-bottom:60px;
}
.region-winemakers {
padding-bottom:40px;
}


.region-info__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 20px;
}

.region-info__heading {
    margin: 0;
    font-family: var(--region-serif);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 40px);
    color: var(--region-ink);
}

.region-info__stats {
    display: flex;
    gap: 28px;
    margin-right: 10%;
}

.region-info__stat {
    text-transform: uppercase;
    font-size: 14px;
    color: var(--region-ink);
    font-family: "Work Sans", serif;
    font-weight:600;
}
.region-info__stat + .region-info__stat {
    border-left: 1px solid #554F4F;
    padding-left: 28px;
}

.region-info__stat strong {
    font-weight: 700;
}

.region-info__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* left column ----------------------------------------------------------- */
.region-info__panel {
    background: #fbf8f5;
    padding: 8px 32px 14px;
}

.region-info__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
}

.region-info__map-mini {
    max-width: 120px;
    height: auto;
}

.region-info__flag {
    max-width: 72px;
    height: auto;
}

.region-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.region-info__item {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.region-info__icon {
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.region-info__item:last-child {
    border-bottom: none;
}

.region-info__icon img {
    max-width: 30px;
    max-height: 30px;
    opacity: 0.5;
}

.region-info__letter {
        font-family: "Work Sans", serif;
    font-size: 32px;
    line-height: 1;
    color: #211A15 !important;
    font-weight:600;
}
.region-info__item:nth-last-child(-n+2) {
    border-bottom: none;
}
.region-info__text {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    color: var(--region-ink);
}

.region-info__label {
    margin-right: 8px;
        color: #211A15 !important;
    font-weight:500;
}

.region-info__value {
    color: #211A15 !important;
    font-weight:500;
    letter-spacing: 0.08em;
}

.region-info__media {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 24px;
}

/* right column ---------------------------------------------------------- */
.region-info__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
    .region-hero {
        min-height: 340px;
        margin-bottom: 48px;
    }
    .region-hero__panel {
        bottom: -32px;
        padding: 22px 24px;
    }
    .region-hero__compass {
        width: 48px;
        height: 48px;
    }
    .region-info__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .region-info__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ---------- Section 3: lead text ---------- */
.region-lead {
    width: min(92%, var(--region-maxw));
    margin: 0 auto;
    padding: 140px 0 100px;
}
.region-lead__inner {
    font-family: var(--region-serif);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.5;
    color: var(--region-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: justify;
}
.region-lead__inner p { margin: 0 0 1em; }
.region-lead__inner p:last-child { margin-bottom: 0; }

/* ---------- Section 4: description / history ---------- */
.region-cols {
    width: min(92%, var(--region-maxw));
    margin: 0 auto;
    padding: 0 0 80px;
}
.region-cols__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}
.region-col__heading {
margin: 0 0 16px;
  font-family: var(--region-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--region-ink);
}
.region-col__text {
    font-size: 12px;
    line-height: 1.7;
    color: var(--region-muted);
    margin-bottom: 24px;
}
.region-col__text p {     margin: 0 0 1em;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.4px; }
.region-col__media { position: relative; }
.region-col__image { display: block; width: 100%; height: auto; }

@media (max-width: 820px) {
    .region-cols__grid { grid-template-columns: 1fr; gap: 36px; }
}

.region-col__media {
    position: relative;
}

.region-col__compass {
    position: absolute;
    top: 35px;
    right: 35px;
    width: 40px;
    height: 40px;
    pointer-events: none; /* чтобы иконка не мешала кликам по изображению */
}


/* ===== Aroma Potential section ===== */
.aroma{
	width: min(92%, var(--region-maxw));   /* same container as the other sections */
	margin: 0 auto;
	box-sizing: border-box;
	background:#fbf8f5;
	padding:56px 56px 64px;
    margin-bottom:60px;
}
.aroma__inner{
	margin:0 auto;
}
.aroma__heading{
	font-family: var(--region-serif);
	font-style:italic;
	font-weight:600;
	font-size: clamp(22px, 2.4vw, 32px);
	color: var(--region-ink);
	margin:0 0 20px;
}
.aroma__lead{
	max-width:620px;
	color:#6f6a64;
	font-size:15px;
	line-height:1.7;
	margin:0 0 48px;
    font-family:"Work Sans";
}
.aroma__lead p{margin:0 0 1em;}
.aroma__lead p:last-child{margin-bottom:0;}

.aroma__grid{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:28px;
}
.aroma__item{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
}
.aroma__media{
	display:block;
	width:100%;
	aspect-ratio:1/1;
	border-radius:14px;
	overflow:hidden;
	background:#e7e0d6;
}
.aroma__image{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.aroma__label{
	margin-top:18px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:#000;
    font-family:"Work Sans";
}

@media (max-width:900px){
	.aroma__grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
	.aroma{padding:40px 20px;}
	.aroma__grid{grid-template-columns:repeat(2,1fr);gap:20px;}
}


/* =========================================================
   GRAPE GALLERY
   4 square images at the corners + 1 vertical image in the
   center (spanning both rows). Missing vertical -> SVG.
   Standalone — no dependency on other stylesheets.
   ========================================================= */

.grape-gallery-section {
	padding: 24px 0;
}

.grape-gallery-section .content_wrap {
	max-width: 1240px;
	margin: 0 auto;
	width: min(92%, 1240px);
	box-sizing: border-box;
}

.grape-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"a c d"
		"b c e";
	gap: 1px;
	background: #e9e5df;            /* shows through the gaps as thin gridlines */
	border: 1px solid #e9e5df;
}

.grape-gallery__cell {
	position: relative;
	overflow: hidden;
	background: #f6f4f1;            /* light panel for empty cells */
}

/* placement */
.grape-gallery__cell--a { grid-area: a; }
.grape-gallery__cell--b { grid-area: b; }
.grape-gallery__cell--c { grid-area: c; }   /* vertical, spans both rows */
.grape-gallery__cell--d { grid-area: d; }
.grape-gallery__cell--e { grid-area: e; }

/* the four corner images are square; the vertical sizes itself from the
   two square rows it spans, so it needs no aspect-ratio on desktop */
.grape-gallery__cell--sq { aspect-ratio: 1 / 1; }

.grape-gallery__cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* default SVG placeholder (centered, light grey) */
.grape-gallery__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grape-gallery__ph-svg {
	width: 28%;
	max-width: 130px;
	height: auto;
}

/* -------- responsive -------- */
@media (max-width: 700px) {
	.grape-gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"c c"
			"a d"
			"b e";
	}

	/* vertical becomes a wide banner on top when it can't span two rows */
	.grape-gallery__cell--c {
		aspect-ratio: 16 / 9;
	}

	.grape-gallery__ph-svg {
		width: 18%;
		max-width: 90px;
	}
}

@media (max-width: 420px) {
	.grape-gallery {
		grid-template-columns: 1fr;
		grid-template-areas:
			"c"
			"a"
			"b"
			"d"
			"e";
	}

	.grape-gallery__cell--c {
		aspect-ratio: 3 / 4;        /* keep it portrait on the narrowest screens */
	}
}