/* Rólunk v24 palette: page-scoped layout only. Typography/spacing come from design-system.css.
   The photo content is unchanged. Every new icon is a separate SVG image file. */
.about23 { padding-top: var(--header-height); color: var(--white); background: var(--ink); }
.about23 figure { margin: 0; }
.about23 .eyebrow { color: var(--accent); }
.about23 :is(.display-title, .section-title) em { color: var(--heading-accent); }
.about23 :is(.about23-copy, .about23-hero-copy) > .eyebrow { margin-bottom: var(--space-5); }
.about23 .lead { max-width: 52ch; }
.about23 p { text-wrap: pretty; }
.about23-copy { min-width: 0; }
.about23-copy > .lead { margin-top: var(--space-5); color: var(--muted); }
.about23-prose { max-width: 66ch; margin-top: var(--space-5); color: var(--muted); }
.about23-prose p + p { margin-top: var(--space-5); }
.about23-prose .lead { color: var(--white); }
.about23-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.about23-actions .button { min-height: var(--button-height); }
.about23-control { width: 24px; height: 24px; flex: 0 0 24px; }
.about23-icon { width: 72px; height: 72px; flex: 0 0 72px; object-fit: contain; }
.about23-text-link { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 48px; margin-top: var(--space-6); color: var(--accent); font: 800 var(--text-button)/1.5 var(--font-body); text-decoration: none; }
.about23-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.about23-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; gap: var(--space-3); padding: 0; margin: 0; font-size: var(--text-small); color: var(--muted); }
.about23-breadcrumb li + li { padding-left: var(--space-3); border-left: 1px solid #637e81; }
.about23-breadcrumb a { text-decoration: none; }
.about23-breadcrumb a:hover { color: var(--accent); }

/* Single full-width photograph, no side panels or stretched image edges. */
.about23-hero { position: relative; isolation: isolate; background: var(--ink-deep); }
.about23-hero-media { position: absolute; inset: 0; z-index: -2; display: block; }
.about23-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; }
.about23-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(2 10 13 / 96%) 0%, rgb(2 10 13 / 88%) 20%, rgb(2 10 13 / 57%) 45%, rgb(2 10 13 / 9%) 74%), linear-gradient(0deg, var(--ink-deep), transparent 30%); }
.about23-hero-inner { padding-top: var(--space-5); padding-bottom: var(--section-space); }
.about23-hero-copy { width: 62%; max-width: 900px; padding-top: var(--space-7); }
.about23-hero-copy h1 > * { display: block; }
.about23-hero-copy .lead { max-width: 43ch; color: var(--white); margin-top: var(--space-5); }
.about23-intro { max-width: 54ch; color: var(--muted); margin-top: var(--space-4); }

/* Same gutter as every section. Cards have real inner padding. */
.about23-values { padding-block: var(--space-5) var(--space-7); background: var(--ink-deep); }
.about23-values-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gap); }
.about23-value { display: flex; align-items: flex-start; gap: var(--space-5); min-width: 0; padding: var(--card-padding); border: 1px solid rgb(var(--accent-rgb)/20%); border-radius: var(--radius-card); background: #08191f; }
.about23-value > div { min-width: 0; }
.about23-value .card-title { line-height: 1.25; }
.about23-value p { color: var(--muted); margin-top: var(--space-3); }

/* Story, 2 editorial columns. Original photo proportion preserved. */
.about23-story-grid { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: var(--space-8); align-items: center; }
.about23-story-photo { min-width: 0; }
.about23-story-photo picture { display: block; overflow: hidden; border-radius: var(--radius-card); }
.about23-story-photo img { display: block; width: 100%; height: auto; }
.about23-story-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); color: var(--muted); font-size: var(--text-small); }

/* Ingredients: the four icons are standalone vector files, not pseudo-elements. */
.about23-character { border-block: 1px solid rgb(var(--accent-rgb)/12%); background: #08161c; }
.about23-character-grid { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); grid-template-areas: "photo head" "photo cards" "photo note"; column-gap: var(--space-8); row-gap: var(--space-6); align-items: center; }
.about23-character-head { grid-area: head; }
.about23-character-photo { grid-area: photo; min-width: 0; }
.about23-character-photo picture { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-card); }
.about23-character-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 55%; }
.about23-character-photo figcaption { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-small); }
.about23-ingredients { grid-area: cards; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--grid-gap); }
.about23-ingredient { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: var(--space-4); min-width: 0; align-items: start; padding: var(--card-padding); border: 1px solid rgb(var(--accent-rgb)/16%); border-radius: var(--radius-card); background: var(--ink-deep); }
.about23-ingredient .about23-icon { width: 64px; height: 64px; }
.about23-ingredient .card-title { line-height: 1.25; }
.about23-ingredient p { color: var(--muted); margin-top: var(--space-3); }
.about23-character-note { grid-area: note; color: var(--muted); max-width: 72ch; }
.about23-character-note p + p { margin-top: var(--space-4); }

/* Photo gallery, one coherent grid with original-photo lightbox. */
.about23-experience-grid { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: var(--space-8); align-items: center; }
.about23-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--grid-gap); min-width: 0; }
.about23-gallery-item { min-width: 0; }
.about23-gallery-link { position: relative; display: block; overflow: hidden; border-radius: var(--radius-card); background: var(--ink-deep); }
.about23-gallery-link picture { display: block; }
.about23-gallery-link img:not(.about23-control) { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.about23-zoom { position: absolute; right: var(--space-3); bottom: var(--space-3); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb)/25%); border-radius: 50%; background: rgb(2 10 13 / 90%); }
.about23-gallery-item figcaption { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--text-small); color: var(--muted); padding-top: var(--space-3); }
.about23-image-number { font: 800 var(--text-eyebrow)/1.5 var(--font-body); color: var(--accent); }

/* Closing photo and copy, full-width like the homepage photographic sections. */
.about23-philosophy { position: relative; isolation: isolate; background: var(--ink-deep); }
.about23-philosophy-media { position: absolute; inset: 0; z-index: -2; display: block; }
.about23-philosophy-media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.about23-philosophy::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(2 10 13 / 8%) 0%, rgb(2 10 13 / 18%) 25%, rgb(2 10 13 / 78%) 47%, var(--ink-deep) 68%), linear-gradient(180deg,var(--ink-deep),transparent 15%,transparent 82%,var(--ink-deep)); }
.about23-philosophy-copy { width: 53%; margin-left: auto; }
.about23-signoff { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-7); padding-left: var(--space-5); border-left: 2px solid var(--accent); }
.about23-signoff strong { font: 400 var(--text-h3)/1.25 var(--font-heading); text-transform: uppercase; color: var(--white); }
.about23-signoff span { font-size: var(--text-small); letter-spacing: .055em; color: var(--muted); }

/* Native dialog handles the focus boundary. Links work without JS. */
.about23-lightbox { width: min(1100px,calc(100% - 2 * var(--gutter))); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: var(--card-padding); color: var(--white); background: var(--ink); border: 1px solid rgb(var(--accent-rgb)/30%); border-radius: var(--radius-card); overscroll-behavior: contain; }
.about23-lightbox:not([open]) { display: none; }
.about23-lightbox::backdrop { background: rgb(0 6 8 / 90%); }
.about23-lightbox-head, .about23-lightbox-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.about23-lightbox-head { margin-bottom: var(--space-4); }
.about23-lightbox figure { margin: 0; }
.about23-lightbox figure > img { display: block; width: 100%; height: min(62dvh,740px); object-fit: contain; }
.about23-lightbox figcaption { font-size: var(--text-small); color: var(--muted); text-align: center; padding-block: var(--space-4); }
.about23-lightbox-control { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #365254; border-radius: 50%; background: var(--ink-deep); }
.about23-lightbox-control:hover { border-color: var(--accent); }
.about23-lightbox-foot { justify-content: center; font-size: var(--text-small); }

@media (max-width: 1535px) {
 .about23-ingredient { grid-template-columns: minmax(0,1fr); }
 .about23-value { gap: var(--space-4); }
}
@media (max-width: 1279px) {
 .about23-story-grid, .about23-character-grid, .about23-experience-grid { column-gap: var(--space-7); }
 .about23-value { flex-direction: column; }
 .about23-character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "photo head" "cards cards" "note note"; }
 .about23-ingredients { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .about23-experience-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
}
@media (max-width: 1099px) {
 .about23-hero { display: flex; flex-direction: column; }
 .about23-hero-inner { order: 0; padding-bottom: var(--space-6); }
 .about23-hero-copy { width: 100%; max-width: 900px; padding-top: var(--space-6); }
 .about23-hero-media { position: relative; z-index: auto; inset: auto; order: 1; height: clamp(300px,44vw,460px); }
 .about23-hero-media img { object-position: center 58%; }
 .about23-hero::before { display: none; }
 .about23-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,var(--ink-deep),transparent 18%,transparent 80%,var(--ink-deep)); }
 .about23-ingredients { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .about23-ingredient { grid-template-columns: 64px minmax(0,1fr); }
 .about23-experience-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-7); }
 .about23-experience-copy .about23-prose { max-width: 70ch; }
}
@media (max-width: 899px) {
 .about23-story-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
 .about23-story-photo { width: 100%; }
 .about23-character-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "head" "photo" "cards" "note"; row-gap: var(--space-6); }
 .about23-character-photo { width: 100%; }
 .about23-character-photo picture { aspect-ratio: auto; }
 .about23-character-photo img { height: auto; max-height: 640px; object-fit: cover; object-position: center 60%; }
 .about23-philosophy { display: flex; flex-direction: column; padding-top: 0; }
 .about23-philosophy-media { position: relative; z-index: 0; height: clamp(260px,50vw,420px); }
 .about23-philosophy-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,var(--ink-deep),transparent 30%); }
 .about23-philosophy::before { display: none; }
 .about23-philosophy-inner { padding-top: var(--space-5); }
 .about23-philosophy-copy { width: 100%; }
}
@media (max-width: 767px) {
 .about23-hero-inner { padding-top: var(--space-4); }
 .about23-hero-copy h1 { overflow-wrap: normal; }
 .about23-values { padding-block: var(--space-5) var(--space-6); }
 .about23-values-grid { grid-template-columns: minmax(0,1fr); }
 .about23-value { flex-direction: row; }
 .about23-values .about23-icon { width: 64px; height: 64px; flex-basis: 64px; }
 .about23-actions { margin-top: var(--space-5); }
 .about23-story-photo figcaption { flex-direction: column; }
 .about23-signoff { margin-top: var(--space-6); }
}
@media (max-width: 599px) {
 .about23-ingredients, .about23-gallery { grid-template-columns: minmax(0,1fr); }
 .about23-gallery { gap: var(--space-5); }
 .about23-lightbox { padding: var(--space-4); }
 .about23-lightbox figure > img { height: auto; max-height: 60dvh; }
}
@media (max-width: 374px) {
 .about23-value { flex-direction: column; }
 .about23-ingredient { grid-template-columns: minmax(0,1fr); }
 .about23-actions .button { padding-inline: var(--space-4); gap: var(--space-3); }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .about23-gallery-link img:not(.about23-control) { transition: transform 240ms var(--motion-ease); }
 .about23-gallery-link:hover img:not(.about23-control) { transform: scale(1.025); }
}
@media print {
 .about23 { padding-top: 0; }
 .about23-lightbox, .about23-zoom { display: none!important; }
 .about23-hero-media { position: relative; height: auto; }
 .about23-hero::before { display: none; }
 .about23-hero-copy { width: 100%; }
}