/* =====================================================
   Album Sections — basislayout en section-specifieke stijlen

   Hero/Tekst/Hoofdstuk/Navigatie/Highlight/Scheidingslijn delen allemaal dezelfde default-padding
   uit AlbumStyle: var(--hs-header-padding, ...) — dezelfde CSS-variabele als .album-header-box al
   gebruikt (gevoed vanuit AlbumStyle.HeaderPadding). Het per-sectietype afgestemde spacing-gevoel
   (Hero ruimer dan Scheidingslijn e.d.) wordt niet meer via CSS-defaults geregeld, maar als
   expliciete PaddingTop/Right/Bottom/Left-waarden op de sectie zelf gezet zodra je een nieuwe
   sectie toevoegt (zie ApplyDefaultPadding in JobSectionEditorRendererBase.cs) — daarna gewoon
   verder aanpasbaar via het "Geavanceerd"-paneel. Galerij is bewust uitgezonderd: die padding is
   0 boven om dubbele ruimte met de eigen header-box te voorkomen, geen aftgestemd "gevoel" maar
   een structurele noodzaak.
   ===================================================== */

.album-sections {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Gedeelde section basisstijl */
.album-section {
    width: 100%;
    box-sizing: border-box;
}

/* Tabellen in rich-text inhoud (Tekst, Hoofdstuk, Highlight, Hero, ...) altijd volle breedte */
.album-section table {
    width: 100%;
    border-collapse: collapse;
}

/* ---- Header-box: gedeelde stijl voor de Header-sectie én de titel van Gallery/Eigen-foto's-
   secties, zodat ze altijd identiek ogen. Neemt standaard de AlbumStyle Header-instellingen over
   (achtergrond/rand/padding/uitlijning/titelstijl); per sectie override-baar via inline style
   (HeightPx/BackgroundColor), zie BuildOptionalSectionStyle in HeadshotPublicAlbum.razor. */
.album-header-box {
    display: flex;
    gap: 12px;
    align-items: var(--hs-header-vertical-align, center);
    background: var(--hs-header-bg, #ffffff);
    border: var(--hs-header-border-width, 1px) var(--hs-header-border-style, solid) var(--hs-header-border-color, #e5e7eb);
    border-radius: var(--hs-header-border-radius, 10px);
    padding: var(--hs-header-padding, 16px);
    text-align: var(--hs-header-text-align, left);
    color: var(--hs-title-color, #111827);
    font-size: var(--hs-title-font-size, 24px);
    font-family: var(--hs-title-font-family, inherit);
    font-weight: var(--hs-title-font-weight, 700);
}

/* Zonder dit blijven directe children (bijv. .album-section-header__content, of de
   rich-text-inhoud zelf bij de Gallery-titel) op hun content-breedte staan i.p.v. de
   volledige breedte van de flex-box te vullen. */
.album-header-box > * {
    flex: 1 1 auto;
    min-width: 0;
}

.album-header-box > :last-child {
    margin-bottom: 0;
}

/* Koppen in de rich-text-inhoud (bijv. "<h1>{Jobnaam}</h1>" uit een albumsjabloon) volgen de titelstijl
   van het sjabloon i.p.v. de standaard kopstijl van het thema. */
.album-header-box :is(h1, h2, h3) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: 1.15;
    margin: 0;
}

/* ---- Hero ---- */
.album-section--hero {
    position: relative;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hs-header-padding, 16px);
}

.album-section--hero.hero--overlay-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.album-section--hero.hero--overlay-light::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
}

.album-section-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.album-section--hero.hero--align-left .album-section-hero__content { align-self: center; margin-right: auto; margin-left: 0; }
.album-section--hero.hero--align-right .album-section-hero__content { align-self: center; margin-left: auto; margin-right: 0; }
.album-section--hero.hero--align-center .album-section-hero__content { align-self: center; margin-left: auto; margin-right: auto; text-align: center; }

.album-section-hero__html {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 16px;
}

/* Typografie van het albumsjabloon ook in secties: koppen in het titel-lettertype, lopende tekst in het
   subtitel-lettertype (voorheen gebruikte alleen de automatische albumkop deze lettertypen). */
.album-section-hero__html,
.album-section-chapter__title,
.album-section-navigation__title,
.album-section-text__heading {
    font-family: var(--hs-title-font-family, inherit);
}

/* Koppen in de rich-text-inhoud van secties (bijv. "<h2>De ceremonie</h2>" in een hoofdstuk uit een sectietemplate)
   krijgen anders het lettertype van het thema; ook daar geldt het titel-lettertype van het sjabloon. */
.album-section-hero__html :is(h1, h2, h3, h4),
.album-section-chapter__title :is(h1, h2, h3, h4),
.album-section-navigation__title :is(h1, h2, h3, h4),
.album-section-text__body :is(h1, h2, h3, h4),
.album-section-highlight__html :is(h1, h2, h3, h4),
.album-section-chapter__description :is(h1, h2, h3, h4) {
    font-family: var(--hs-title-font-family, inherit);
}

.album-section-hero__html--secondary,
.album-section-text__body,
.album-section-chapter__description,
.album-section-highlight__html {
    font-family: var(--hs-subtitle-font-family, inherit);
}

.album-section-hero__html--secondary {
    font-size: 1.25rem;
}

/* Lopende tekst in de grootte die het albumsjabloon voor de subtitel instelt. */
.album-section-text__body {
    font-size: var(--hs-subtitle-font-size, 1rem);
    line-height: 1.7;
}

/* Donkere overlay vraagt om witte tekst met schaduw voor contrast. */
.album-section--hero.hero--overlay-dark .album-section-hero__html {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.album-section--hero.hero--overlay-dark .album-section-hero__html--secondary {
    color: rgba(255, 255, 255, 0.9);
}

/* Lichte overlay wast de achtergrond juist uit, dus donkere tekst blijft leesbaar. */
.album-section--hero.hero--overlay-light .album-section-hero__html {
    color: #111827;
    text-shadow: 0 1px 4px rgba(255,255,255,.6);
}

.album-section--hero.hero--overlay-light .album-section-hero__html--secondary {
    color: rgba(17, 24, 39, 0.85);
}

/* Geen overlay/achtergrondfoto: gewoon de standaard albumtekstkleur gebruiken (zichtbaar op de lichte albumachtergrond). */

.album-section-hero__html > :last-child {
    margin-bottom: 0;
}

/* ---- Tekst ---- */
.album-section--text {
    padding: var(--hs-header-padding, 16px);
}

.album-section--text.text--center-narrow {
    max-width: 100%;
    margin: 0 auto;
}

.album-section--text.text--full-width {
    max-width: 100%;
}

.album-section--text.text--two-column .album-section-text__body {
    column-count: 2;
    column-gap: 2rem;
}

.album-section-text__heading {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ---- Hoofdstuk ---- */
.album-section--chapter {
    padding: var(--hs-header-padding, 16px);
}

.album-section-chapter__rule {
    border: none;
    border-top: 2px solid rgba(128, 128, 128, 0.3);
    margin: 0 auto 24px;
    width: 80px;
}

.album-section-chapter__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.album-section-chapter__description {
    font-size: 1rem;
    opacity: 0.7;
}

/* ---- Galerij ---- */
/* Geen top-padding: als er een titel is, geeft de header-box (--hs-header-padding) al eigen
   ruimte; zonder titel begint de galerij direct. Bottom-padding blijft voor ruimte t.o.v. de
   volgende sectie. */
.album-section--gallery {
    padding: 0 0 24px;
}

/* Visuele styling komt volledig van de gedeelde .album-header-box klasse (zie boven) —
   .album-section-gallery__heading dient alleen nog als markup-hook, geen eigen styling
   (de header-box heeft al eigen padding via --hs-header-padding, dus geen extra margin nodig). */

/* ---- Navigatie ---- */
.album-section--navigation {
    padding: var(--hs-header-padding, 16px);
}

.album-section-navigation-wrap {
    display: flex;
    gap: 10px;
}

.album-section-navigation-wrap.navigation-title--above {
    flex-direction: column;
}

.album-section-navigation-wrap.navigation-title--below {
    flex-direction: column-reverse;
}

.album-section-navigation-wrap.navigation-title--before {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.album-section-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.album-section-navigation__title {
    margin: 0 0 10px;
}

.album-section-navigation__title > :last-child {
    margin-bottom: 0;
}

.album-section-navigation__item {
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font: inherit;
    border: none;
    background: transparent;
    cursor: pointer;
}

.album-section-navigation.navigation--buttons .album-section-navigation__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: var(--hs-button-radius, 8px);
    border: 1px solid var(--hs-album-border, #e5e7eb);
    background: var(--hs-button-bg, #2563eb);
    color: var(--hs-button-text, #ffffff);
    box-shadow: var(--hs-button-shadow, none);
    font-weight: 600;
}

.album-section-navigation.navigation--buttons .album-section-navigation__item:hover {
    background: var(--hs-button-hover-bg, #1d4ed8);
    color: var(--hs-button-hover-text, #ffffff);
}

.album-section-navigation.navigation--links .album-section-navigation__item {
    color: var(--hs-nav-link-color, var(--hs-accent, #4A90E2));
    border-bottom: 1px solid transparent;
    padding: 2px 0;
}

.album-section-navigation.navigation--links .album-section-navigation__item:hover {
    border-bottom-color: currentColor;
}

.album-section-navigation.navigation--links.navigation-links--accent .album-section-navigation__item {
    color: var(--hs-nav-link-color, var(--hs-accent, #4A90E2));
}

.album-section-navigation.navigation--links.navigation-links--always-underlined .album-section-navigation__item {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    border-bottom-color: transparent;
}

.album-section-navigation.navigation--links.navigation-links--always-underlined .album-section-navigation__item:hover {
    opacity: 0.85;
}

.album-section-navigation.navigation--links.navigation-links--subtle .album-section-navigation__item {
    color: var(--hs-nav-link-subtle-color, #6b7280);
    font-weight: 500;
}

.album-section-navigation.navigation--links.navigation-links--subtle .album-section-navigation__item:hover {
    color: var(--hs-nav-link-subtle-hover-color, #374151);
    border-bottom-color: currentColor;
}

.album-section-navigation.navigation--links.navigation-links--pill .album-section-navigation__item {
    border: 1px solid var(--hs-nav-link-pill-border-color, var(--hs-album-border, #e5e7eb));
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--hs-nav-link-color, var(--hs-accent, #4A90E2));
}

.album-section-navigation.navigation--links.navigation-links--pill .album-section-navigation__item:hover {
    background: var(--hs-nav-link-pill-hover-bg, rgba(74, 144, 226, 0.08));
    color: var(--hs-nav-link-pill-hover-text, var(--hs-nav-link-color, var(--hs-accent, #4A90E2)));
    border-bottom-color: transparent;
}

/* ---- Highlight ---- */
.album-section--highlight {
    padding: var(--hs-header-padding, 16px);
}

.album-section-highlight__overlay-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.album-section-highlight__media,
.album-section-highlight__split-media {
    position: relative;
    min-height: 180px;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #eef1f5;
}

.album-section-highlight__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.album-section-highlight__styled-media {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.album-section-highlight__styled-media.is-clickable {
    cursor: zoom-in;
}

.album-section-highlight__styled-media:hover {
    box-shadow: var(--hs-highlight-card-hover-shadow, none);
    transform: scale(var(--hs-highlight-card-hover-scale, 1));
}

.album-section-highlight__styled-image {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.album-section-highlight__styled-media:hover .album-section-highlight__styled-image {
    opacity: var(--hs-highlight-image-hover-opacity, 1);
    transform: scale(var(--hs-highlight-image-hover-zoom, 1));
}

.album-section-highlight__image-empty {
    width: 100%;
    min-height: 180px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: repeating-linear-gradient(
        -45deg,
        #f3f4f6,
        #f3f4f6 12px,
        #e5e7eb 12px,
        #e5e7eb 24px
    );
    text-align: center;
    padding: 16px;
}

.album-section-highlight__html {
    line-height: 1.5;
}

.album-section-highlight__html > :last-child {
    margin-bottom: 0;
}

.highlight--text-on .album-section-highlight__on-image {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.4vw, 28px);
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.45));
}

.highlight--text-on .album-section-highlight__on-image .album-section-highlight__html {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.album-section--highlight.highlight--split {
    padding: 0;
}

.album-section-highlight__split-wrap {
    height: 100%;
    min-height: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.album-section-highlight__split-text {
    display: flex;
    align-items: center;
    padding: clamp(16px, 2.5vw, 36px);
}

.album-section--highlight.highlight--split.highlight--split-text-left .album-section-highlight__split-media {
    order: 2;
}

.album-section--highlight.highlight--split.highlight--split-text-left .album-section-highlight__split-text {
    order: 1;
}

.album-section--highlight.highlight--split.highlight--split-image-left .album-section-highlight__split-media {
    order: 1;
}

.album-section--highlight.highlight--split.highlight--split-image-left .album-section-highlight__split-text {
    order: 2;
}

@media (max-width: 900px) {
    .album-section-highlight__split-wrap {
        grid-template-columns: 1fr;
    }

    .album-section--highlight.highlight--split .album-section-highlight__split-media,
    .album-section--highlight.highlight--split .album-section-highlight__split-text {
        order: initial;
    }

    .album-section-highlight__split-text {
        padding: 18px;
    }
}

/* ---- Scheidingslijn ---- */
.album-section--divider {
    padding: var(--hs-header-padding, 16px);
}

.album-section-divider__line {
    border: none;
    border-top-style: solid;
    margin: 0;
    opacity: 0.25;
}

.album-section-divider__line.divider--dashed { border-top-style: dashed; }
.album-section-divider__line.divider--dotted { border-top-style: dotted; }

/* ---- HtmlEditor (Quill) class mappings in viewer ---- */
.album-sections .ql-align-center { text-align: center; }
.album-sections .ql-align-right { text-align: right; }
.album-sections .ql-align-justify { text-align: justify; }

.album-sections .ql-font-serif {
    font-family: Georgia, "Times New Roman", serif;
}

.album-sections .ql-font-monospace {
    font-family: Monaco, "Courier New", monospace;
}

.album-sections .ql-direction-rtl {
    direction: rtl;
    text-align: inherit;
}

/* ---- Legacy fallback wrapper ---- */
.album-legacy-layout {
    width: 100%;
}