/* =============================================================================
   Bogdanbor Child — Rólunk page
   ============================================================================= */

/* .container, .section-eyebrow, .section-header, .section-title
   are defined globally in typography.css. */

/* =============================================================================
   Design notes
   – Prose sections use a 640px max-width column for ~65-char line length.
   – Section rhythm: 7–8 rem vertical padding per section.
   – Alternating warm/white backgrounds mark editorial "chapters."
   – .rolunk-story-section is the shared class; individual section classes
     handle background overrides and any deviations.
   ============================================================================= */

/* Image placeholder (used across all rolunk sections) */
.image-placeholder {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	background:      #f0ede8;
	color:           #b8a898;
	font-size:       0.75rem;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
}

/* -----------------------------------------------------------------------------
   Page wrapper — offset for fixed header
   ----------------------------------------------------------------------------- */
.page-rolunk {
	padding-top: var(--header-height, 80px);
}

/* -----------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------------- */
.rolunk-hero {
	padding:       9rem 0 8rem;
	text-align:    center;
	border-bottom: 1px solid var(--color-border);
	background:    var(--color-warm);
}

/* Constrain headline and lead to a readable column */
.rolunk-hero__inner {
	max-width: 720px;
}

.rolunk-hero__title {
	font-family:    var( --font-serif );
	font-size:      var( --text-hero );
	font-weight:    400;
	letter-spacing: var( --tracking-tight );
	color:          var( --color-ink );
	line-height:    var( --leading-tight );
	margin:         0 0 2rem;
}

.rolunk-hero__lead {
	font-family: var( --font-serif );
	font-size:   var( --text-md );
	color:       var( --color-muted );
	max-width:   560px;
	margin:      0 auto;
	line-height: var( --leading-relaxed );
}

@media (max-width: 600px) {
	.rolunk-hero {
		padding: 6rem 0 5rem;
	}
}

/* -----------------------------------------------------------------------------
   Intro — two-column text + image
   ----------------------------------------------------------------------------- */
.rolunk-intro {
	padding: 8rem 0;
	border-bottom: 1px solid var(--color-border);
}

.rolunk-intro__inner {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   5rem;
	align-items:           center;
}

.rolunk-intro__title {
	font-family:    var( --font-serif );
	font-size:      clamp(1.5rem, 3vw, 2.25rem);
	font-weight:    400;
	letter-spacing: var( --tracking-wide );
	color:          var( --color-ink );
	line-height:    var( --leading-snug );
	margin-bottom:  2rem;
}

.rolunk-intro__body {
	font-family:   var( --font-serif );
	font-size:     var( --text-base );
	line-height:   var( --leading-loose );
	color:         var( --color-muted );
	margin-bottom: 1.25rem;
}

.rolunk-intro__body:last-of-type {
	margin-bottom: 0;
}

.rolunk-intro__image {
	margin:       0;
	aspect-ratio: 4 / 5;
	overflow:     hidden;
}

.rolunk-intro__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.rolunk-intro__image .image-placeholder {
	aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
	.rolunk-intro__inner {
		grid-template-columns: 1fr;
		gap:                   3rem;
	}

	.rolunk-intro__image {
		order: -1;
	}
}

/* -----------------------------------------------------------------------------
   Gallery
   ----------------------------------------------------------------------------- */
.rolunk-gallery {
	padding:    8rem 0;
	background: var(--color-warm);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.gallery-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1rem;
}

.gallery-grid__item {
	margin:       0;
	overflow:     hidden;
	aspect-ratio: 1 / 1;
	background:   #f0ede8;
}

.gallery-grid__item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.5s ease;
}

.gallery-grid__item:hover img {
	transform: scale(1.05);
}

.gallery-grid__item--placeholder .image-placeholder {
	height: 100%;
}

/* Larger first item */
.gallery-grid__item:first-child {
	grid-column:  span 2;
	grid-row:     span 2;
	aspect-ratio: unset;
}

@media (max-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-grid__item:first-child {
		grid-column:  span 2;
		grid-row:     span 1;
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 480px) {
	.gallery-grid {
		grid-template-columns: 1fr;
	}

	.gallery-grid__item:first-child {
		grid-column: 1;
	}
}

/* =============================================================================
   Story text sections — editorial narrative chapters
   Shared class .rolunk-story-section provides the vertical rhythm;
   individual section classes handle background alternation.
   ============================================================================= */

.rolunk-story-section {
	padding:       7rem 0;
	border-bottom: 1px solid var(--color-border);
}

/* Warm/white alternation for visual chapter separation */
.rolunk-elso-bor  { background: var(--color-warm); }
.rolunk-ma        { background: #fff; }
.rolunk-terroir   { background: var(--color-warm); }
.rolunk-tortenet  { background: #fff; }

/* Constrain prose to a readable ~640 px column */
.rolunk-elso-bor__inner,
.rolunk-ma__inner,
.rolunk-terroir__inner,
.rolunk-tortenet__inner {
	max-width: 640px;
}

/* Give the eyebrow + title header block a tighter bottom margin in prose
   sections — 3.5rem from the global .section-header is slightly generous
   for flowing narrative. */
.rolunk-story-section .section-header {
	margin-bottom: 2.25rem;
}

/* Body paragraph — explicit type treatment to override parent-theme defaults */
.rolunk-story-section__body {
	font-family:   var( --font-serif );
	font-size:     var( --text-base );
	line-height:   var( --leading-loose );
	color:         var( --color-muted );
	margin:        0 0 1.5rem;
}

.rolunk-story-section__body:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.rolunk-story-section {
		padding: 5rem 0;
	}
}

/* =============================================================================
   CTA section
   ============================================================================= */
.rolunk-cta {
	padding:    9rem 0 10rem;
	text-align: center;
	background: var(--color-warm);
}

/* Slightly narrower column for the call-to-action copy */
.rolunk-cta__inner {
	max-width: 540px;
}

.rolunk-cta .section-title {
	font-size:     var( --text-2xl );
	margin-bottom: 1.5rem;
}

.rolunk-cta .rolunk-story-section__body {
	color:         var( --color-muted );
	margin-bottom: 2.75rem;
}

/* Invert the primary button for use on the warm surface */
.rolunk-cta .btn-primary {
	background:   var( --color-ink );
	border-color: var( --color-ink );
	color:        #fff;
}

.rolunk-cta .btn-primary:hover,
.rolunk-cta .btn-primary:focus-visible {
	background: transparent;
	color:      var( --color-ink );
}

@media (max-width: 600px) {
	.rolunk-cta {
		padding: 6rem 0 7rem;
	}
}

/* =============================================================================
   Archival photo strip — "Az első bor" section only
   Low-quality, phone-shot origin photos are treated as archival documents:
   desaturated to signal "past", kept small so grain reads as texture not error,
   labeled with year so the temporal distance is explicit.
   ============================================================================= */

.rolunk-archiv {
	margin-top:  3rem;
	padding-top: 2.5rem;
	border-top:  1px solid var(--color-border);
}

/* Muted eyebrow-style label — smaller and fainter than .section-eyebrow */
.rolunk-archiv__label {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          var( --color-faint );
	margin:         0 0 1rem;
}

.rolunk-archiv__grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap:                   0.75rem;
}

.rolunk-archiv__item {
	margin:       0;
	overflow:     hidden;
	aspect-ratio: 4 / 3;
	background:   #ddd8d0;
}

/* Archival treatment — grayscale + slight contrast boost.
   On hover: gentle colour bleed-through signals "real, not filtered by choice." */
.rolunk-archiv__item img,
.rolunk-archiv__photo {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	filter:     grayscale(70%) contrast(1.06) brightness(0.95);
	transition: filter 0.5s ease;
}

.rolunk-archiv__item:hover img,
.rolunk-archiv__item:hover .rolunk-archiv__photo {
	filter: grayscale(20%) contrast(1.03) brightness(1);
}

.rolunk-archiv__item--placeholder .image-placeholder {
	height:     100%;
	background: #ddd8d0;
	filter:     grayscale(60%);
}

@media (max-width: 480px) {
	.rolunk-archiv__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}