/* =============================================================================
   REMEDA - about page layer
   -----------------------------------------------------------------------------
   Sits on top of assets/css/brand.css, which carries the design tokens and every
   shared component. Linked after it on o-nama-stranica.html only, the same way
   index-refresh.css is linked on the home page.

   The page it replaces was six identical white cards stacked down a single
   column, each holding one grey feature box with an amber circle - no imagery,
   no hierarchy, and nothing to distinguish "our bees" from "quality control".
   Everything here is layout and rhythm: a photographic hero, a two-column
   feature grid, the two mountain lakes the copy already talked about, and a
   closing action. The copy is unchanged.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Section rhythm
   Alternating white and cream bands on the same 84px rhythm the home page uses,
   so the two pages scroll at the same pace.
   -------------------------------------------------------------------------- */
.about-band { padding: 84px 0; }
.about-band--white { background: var(--r-white); }
.about-band--cream { background: var(--r-cream); }
/* The lede is a single paragraph introducing the band directly below it. With
   the full rhythm on both sides it sat in 168px of nothing. */
.about-band--lede { padding-bottom: 0; }

/* -----------------------------------------------------------------------------
   2. Hero
   The page used to open on a bare heading against white, directly under the
   honey navbar - the one page on the site whose subject is a place, and it
   showed the reader nothing.
   -------------------------------------------------------------------------- */
.about-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 560px;
	overflow: hidden;
}
.about-hero-media {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 0;
}
.about-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The lake sits just above the middle of the frame; without this the crop
	   keeps the sky and loses the water. */
	object-position: center 58%;
	display: block;
}
/* A directional scrim rather than a flat wash: the photograph is a pale autumn
   panorama, and a wash heavy enough to carry white type would have killed it. */
.about-hero-scrim {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(20, 13, 7, 0.58) 0%,
		rgba(20, 13, 7, 0.28) 34%,
		rgba(20, 13, 7, 0.62) 74%,
		rgba(20, 13, 7, 0.88) 100%
	);
}
.about-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 130px 0 56px;
}

.about-hero-eyebrow {
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: var(--r-honey);
	margin-bottom: 16px;
}

/* The h1 keeps its .section-title wrapper because assets/js/i18n.js addresses
   the page's headings positionally through it. Only the band's own look is
   overridden here. */
.about-hero .section-title { margin-bottom: 0; }
.about-hero .section-title h1 {
	font-size: 52px;
	line-height: 1.12;
	letter-spacing: -1px;
	color: #fff;
	max-width: 17ch;
	padding-bottom: 0;
	text-shadow: 0 2px 24px rgba(20, 13, 7, 0.45);
}
.about-hero .section-title h1:after { display: none; }
/* The shared accent is tuned for dark type on cream; on a photograph it needs
   the light end of the same family. */
.about-hero .orange-text { color: var(--r-honey); }

.about-hero-place {
	display: inline-flex;
	/* Not centred: the line wraps on a phone, and a pin floating halfway down
	   two lines of text reads as unattached to either. */
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: rgba(251, 246, 236, 0.94);
}
.about-hero-place i {
	position: relative;
	top: 3px;
	color: var(--r-honey);
	font-size: 16px;
}

.about-hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}
.about-hero-fact {
	min-width: 140px;
	padding: 13px 22px;
	border: 1px solid rgba(251, 246, 236, 0.3);
	border-radius: var(--r-radius);
	background: rgba(251, 246, 236, 0.1);
	backdrop-filter: blur(6px);
}
.about-hero-fact strong {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--r-honey);
}
.about-hero-fact span {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	letter-spacing: 0.3px;
	color: rgba(251, 246, 236, 0.86);
}

/* -----------------------------------------------------------------------------
   3. Lede
   The one paragraph that explains where the farm is. It was body copy inside a
   card; it is the page's opening statement and now reads as one.
   -------------------------------------------------------------------------- */
.about-lede {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}
.about-lede p.lead-text {
	margin: 0;
	font-size: 19px;
	line-height: 1.85;
	color: var(--r-ink-soft);
}

/* -----------------------------------------------------------------------------
   4. Feature grid
   Four claims that were four identical full-width cards in a column.
   -------------------------------------------------------------------------- */
.about-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	/* Every card the same size, not just the two sharing a row: without this the
	   second row is taller than the first, because the pharmacy card is the only
	   one with two paragraphs. */
	grid-auto-rows: 1fr;
}
.about-feature {
	display: flex;
	/* Cards are all one size, so the shorter ones have room to spare. Centring
	   splits it above and below the text instead of leaving it all at the
	   bottom; icons still line up across a row because the row is one height. */
	align-items: center;
	gap: 20px;
	padding: 30px 28px;
	background: var(--r-white);
	border: 1px solid var(--r-line);
	border-radius: 10px;
	box-shadow: var(--r-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.about-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--r-shadow-md);
	border-color: rgba(192, 122, 30, 0.35);
}

/* Ink on honey, matching the buttons - 7.7:1, against 4.6:1 for the white-on-
   amber circle this replaces. */
.feature-icon,
.philosophy-icon {
	position: relative;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--r-honey);
	color: var(--r-ink);
}
/* The glyph is centred by absolute positioning rather than line-height: the
   icon font ships several glyphs with an off-centre baseline, and flex
   centring left them visibly high in the circle. */
.feature-icon i,
.philosophy-icon i {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
	font-size: 21px;
	display: block;
}
.feature-icon i::before,
.philosophy-icon i::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	line-height: 1;
	margin: 0;
}

.feature-content h4 {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 600;
	color: var(--r-ink);
}
.feature-content p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--r-ink-soft);
}
.feature-content p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   5. The two lakes
   The lede has always named Lisinsko and Vlasinsko jezero. This is the first
   time the page shows them.
   -------------------------------------------------------------------------- */
.about-lakes-intro {
	max-width: 720px;
	margin: -26px auto 44px;
	text-align: center;
	font-size: 16px;
	line-height: 1.85;
	color: var(--r-ink-soft);
}
.about-lake-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}
.about-lake {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--r-line);
	border-radius: 10px;
	box-shadow: var(--r-shadow-md);
	background: var(--r-ink);
}
.about-lake img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.about-lake:hover img { transform: scale(1.04); }
.about-lake figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 52px 24px 22px;
	background: linear-gradient(180deg, rgba(20, 13, 7, 0) 0%, rgba(20, 13, 7, 0.86) 62%);
}
.about-lake-name {
	margin: 0 0 5px;
	font-family: 'Poppins', sans-serif;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
}
.about-lake-note {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(251, 246, 236, 0.86);
}

/* -----------------------------------------------------------------------------
   6. Brand block
   -------------------------------------------------------------------------- */
.remeda-brand { padding: 0; background: none; border: none; }
p.brand-description {
	max-width: 780px;
	margin: 0 auto 44px;
	text-align: center;
	font-size: 18px;
	line-height: 1.85;
	color: var(--r-ink-soft);
}
.brand-offerings h4 {
	margin-bottom: 22px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	color: var(--r-ink);
}
/* Three peer offerings, previously a stacked list whose rows slid sideways on
   hover. */
.offerings-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
}
.offerings-list li {
	/* Column flex so the shorter one- and two-line items centre against the
	   tallest card rather than hanging from its top edge. align-items is left at
	   stretch on purpose: the label is a bare text node, so it becomes an
	   anonymous flex item, and centring would shrink-wrap it instead of letting
	   it wrap across the card. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 24px;
	text-align: center;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--r-ink-soft);
	background: var(--r-white);
	border: 1px solid var(--r-line);
	border-radius: 10px;
	box-shadow: var(--r-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.offerings-list li:hover {
	transform: translateY(-4px);
	box-shadow: var(--r-shadow-md);
	border-color: rgba(192, 122, 30, 0.35);
}
/* i18n.js rewrites each item's innerHTML, icon included, so the icon has to be
   styled by position rather than by a class of its own. */
.offerings-list li i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--r-honey);
	color: var(--r-ink);
	font-size: 19px;
}

.brand-philosophy {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 30px;
	background: var(--r-white);
	border: 1px solid var(--r-line);
	border-left: 4px solid var(--r-honey);
	border-radius: 10px;
	box-shadow: var(--r-shadow-sm);
}
.philosophy-content h4 {
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 600;
	color: var(--r-ink);
}
.philosophy-content p {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--r-ink-soft);
}

/* -----------------------------------------------------------------------------
   7. Apiary gallery
   Was a Bootstrap row of 400px background panels with offsets that left the
   last three tiles indented out of line with the first three.
   -------------------------------------------------------------------------- */
.about-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.single-team-item {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--r-line);
	border-radius: 10px;
	box-shadow: var(--r-shadow-sm);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.single-team-item:hover {
	box-shadow: var(--r-shadow-md);
	border-color: rgba(192, 122, 30, 0.35);
}
.about-gallery-grid .team-bg {
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: 0;
	transition: transform 0.5s ease;
}
.single-team-item:hover .team-bg { transform: scale(1.05); }
/* The caption sat under the photo in 20px type, heavier than the section
   heading it belonged to. */
.about-gallery-grid .single-team-item h4 {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 44px 18px 16px;
	text-align: left;
	background: linear-gradient(180deg, rgba(20, 13, 7, 0) 0%, rgba(20, 13, 7, 0.82) 62%);
}
.about-gallery-grid .single-team-item h4 span {
	display: block;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	opacity: 1;
}

/* -----------------------------------------------------------------------------
   8. Closing action
   The page is the shop's origin story and ended without one.
   -------------------------------------------------------------------------- */
/* Cream-deep rather than ink: the footer directly below is already the dark
   neutral, and an ink band here merged into it as one long dark slab with the
   call to action stranded in the middle of it. */
.about-cta {
	padding: 76px 0;
	text-align: center;
	background: var(--r-cream-deep);
	border-top: 1px solid var(--r-line);
}
.about-cta h3 {
	margin-bottom: 14px;
	font-size: 32px;
	letter-spacing: -0.4px;
	color: var(--r-ink);
}
.about-cta p {
	max-width: 580px;
	margin: 0 auto 30px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--r-ink-soft);
}

/* -----------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	.about-band { padding: 60px 0; }
	.about-hero { min-height: 460px; }
	.about-hero-inner { padding: 100px 0 44px; }
	.about-hero .section-title h1 { font-size: 34px; max-width: none; }
	.about-hero-fact strong { font-size: 21px; }
	.about-lede p.lead-text { font-size: 17px; }
	.about-features,
	.about-lake-grid { grid-template-columns: 1fr; gap: 18px; }
	.about-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.offerings-list { grid-template-columns: 1fr; gap: 14px; }
	.offerings-list li { padding: 24px 20px; }
	p.brand-description { font-size: 16.5px; margin-bottom: 34px; }
	.about-lakes-intro { margin: -14px auto 32px; }
	.about-cta { padding: 60px 0; }
	.about-cta h3 { font-size: 26px; }
}

@media only screen and (max-width: 767px) {
	.about-hero { min-height: 400px; }
	.about-hero-inner { padding: 84px 0 36px; }
	.about-hero-eyebrow { font-size: 11px; letter-spacing: 2.6px; }
	.about-hero .section-title h1 { font-size: 29px; }
	/* Two across rather than a 140px-wide column of three stacked chips. */
	.about-hero-facts { gap: 10px; }
	.about-hero-fact {
		flex: 1 1 0;
		min-width: 0;
		padding: 11px 14px;
		text-align: center;
	}
	.about-hero-fact strong { font-size: 18px; }
	.about-hero-fact span { font-size: 11px; }
	/* The icon above the text, the way the old single-column cards read. */
	.about-feature {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		padding: 24px 20px;
		text-align: center;
	}
	.brand-philosophy {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		padding: 24px 20px;
		text-align: center;
	}
	.about-gallery-grid { grid-template-columns: 1fr; }
	.about-lake figcaption { padding: 40px 18px 16px; }
}

/* -----------------------------------------------------------------------------
   10. Reduced motion (the global reset is in brand.css)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.about-feature:hover,
	.offerings-list li:hover { transform: none; }
	.about-lake:hover img,
	.single-team-item:hover .team-bg { transform: none; }
}