/**
 * @file
 * Universele PGF Layout Utilities
 * Exact afgestemd op Drupal\pgf_saran_layout\Plugin\paragraphs\Behavior\PgfLayoutBehavior.php
 */

/* ==========================================================================
   1. BREADTE & CONTAINERS (container_width)
   ========================================================================== */
.pgf-width--boxed {
    max-width: var(--container-medium);
    margin-inline: auto;
    padding-inline: var(--spacing-m);
}

.pgf-width--narrow {
    max-width: var(--container-small);
    margin-inline: auto;
    padding-inline: var(--spacing-m);
}

.pgf-width--full {
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   2. HORIZONTALE & VERTICALE UITLIJNING (alignment & vertical_alignment)
   ========================================================================== */
.pgf-align--left   { text-align: left; }
.pgf-align--center { text-align: center; }
.pgf-align--right  { text-align: right; }

.pgf-align--center p,
.pgf-align--center .button,
.pgf-align--center [class*="__actions"] {
    margin-inline: auto;
}

.pgf-valign--top    { display: flex; flex-direction: column; justify-content: flex-start; }
.pgf-valign--center { display: flex; flex-direction: column; justify-content: center; }
.pgf-valign--bottom { display: flex; flex-direction: column; justify-content: flex-end; }

/* ==========================================================================
   3. SPACING / PADDING (padding_top & padding_bottom)
   ========================================================================== */
.pgf-pt--none   { padding-top: 0 !important; }
.pgf-pt--small  { padding-top: var(--spacing-m); }
.pgf-pt--medium { padding-top: var(--spacing-l); }
.pgf-pt--large  { padding-top: var(--spacing-xl); }

.pgf-pb--none   { padding-bottom: 0 !important; }
.pgf-pb--small  { padding-bottom: var(--spacing-m); }
.pgf-pb--medium { padding-bottom: var(--spacing-l); }
.pgf-pb--large  { padding-bottom: var(--spacing-xl); }

/* ==========================================================================
   4. ACHTERGRONDKLEUREN & THEMA'S (bg_theme)
   ========================================================================== */
.pgf-bg--default    { background-color: transparent; }

.pgf-bg--light-gray {
    background-color: var(--color-bg);
    color: var(--color-text-main);
}

.pgf-bg--dark {
    background-color: var(--color-text-main);
    color: var(--color-white);
}

.pgf-bg--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Automatische kleurcorrecties voor titels binnen gekleurde achtergronden */
.pgf-bg--dark h1, .pgf-bg--dark h2, .pgf-bg--dark h3, .pgf-bg--dark h4, .pgf-bg--dark p,
.pgf-bg--primary h1, .pgf-bg--primary h2, .pgf-bg--primary h3, .pgf-bg--primary h4, .pgf-bg--primary p {
    color: var(--color-white);
}

/* ==========================================================================
   5. TEKST CONTRAST OVERWRITES (text_contrast)
   ========================================================================== */
.pgf-contrast--dark,
.pgf-contrast--dark * { color: var(--color-text-main) !important; }

.pgf-contrast--light,
.pgf-contrast--light * { color: var(--color-white) !important; }

/* ==========================================================================
   6. AFGERONDE HOEKEN & SCHADUWEN (border_radius & box_shadow)
   ========================================================================== */
.pgf-radius--none   { border-radius: 0; }
.pgf-radius--small  { border-radius: 4px; }
.pgf-radius--medium { border-radius: 8px; }
.pgf-radius--large  { border-radius: 16px; }

.pgf-shadow--none   { box-shadow: none; }
.pgf-shadow--subtle { box-shadow: 0 2px 8px rgba(68, 33, 0, 0.06); }
.pgf-shadow--medium { box-shadow: 0 4px 16px rgba(68, 33, 0, 0.12); }
.pgf-shadow--large  { box-shadow: 0 8px 30px rgba(68, 33, 0, 0.18); }

/* ==========================================================================
   7. MEDIA, HEIGHT & OVERLAY (image_position, min_height, overlay_opacity)
   ========================================================================== */
.pgf-img-pos--left,
.pgf-img-pos--right {
    display: flex;
    gap: var(--spacing-l);
    align-items: center;
}

.pgf-img-pos--left  { flex-direction: row; }
.pgf-img-pos--right { flex-direction: row-reverse; }

.pgf-img-pos--left > *,
.pgf-img-pos--right > * { flex: 1; }

@media (max-width: 991px) {
    .pgf-img-pos--left,
    .pgf-img-pos--right {
        flex-direction: column;
    }
}

.pgf-min-h--auto  { min-height: auto; }
.pgf-min-h--50vh  { min-height: 50vh; }
.pgf-min-h--75vh  { min-height: 75vh; }
.pgf-min-h--100vh { min-height: 100vh; }

/* Media Overlay Filter (Hero / Media) */
.pgf-overlay--0  [class*="__background"]::after { display: none; }
.pgf-overlay--25 [class*="__background"]::after { background: rgba(68, 33, 0, 0.25); }
.pgf-overlay--50 [class*="__background"]::after { background: rgba(68, 33, 0, 0.50); }
.pgf-overlay--75 [class*="__background"]::after { background: rgba(68, 33, 0, 0.75); }

/* ==========================================================================
   8. GRID & KOLOMMEN (grid_columns & grid_gap)
   ========================================================================== */
/* De container waarin de items geprint worden */
[class*="pgf-cols--"] [class*="__items"],
[class*="pgf-cols--"] .field--name-field-pgf-items {
    display: grid;
    width: 100%;
}

/* Gaps */
.pgf-gap--small [class*="__items"],
.pgf-gap--small .field--name-field-pgf-items { gap: var(--spacing-m); }

.pgf-gap--medium [class*="__items"],
.pgf-gap--medium .field--name-field-pgf-items { gap: var(--spacing-l); }

.pgf-gap--large [class*="__items"],
.pgf-gap--large .field--name-field-pgf-items { gap: var(--spacing-xl); }

/* Kolom indelingen (Responsive) */
.pgf-cols--1 [class*="__items"],
.pgf-cols--1 .field--name-field-pgf-items { grid-template-columns: 1fr; }

@media (min-width: 576px) {
    .pgf-cols--2 [class*="__items"],
    .pgf-cols--2 .field--name-field-pgf-items { grid-template-columns: repeat(2, 1fr); }

    .pgf-cols--3 [class*="__items"],
    .pgf-cols--3 .field--name-field-pgf-items { grid-template-columns: repeat(2, 1fr); }

    .pgf-cols--4 [class*="__items"],
    .pgf-cols--4 .field--name-field-pgf-items { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .pgf-cols--3 [class*="__items"],
    .pgf-cols--3 .field--name-field-pgf-items { grid-template-columns: repeat(3, 1fr); }

    .pgf-cols--4 [class*="__items"],
    .pgf-cols--4 .field--name-field-pgf-items { grid-template-columns: repeat(4, 1fr); }
}