/* =========================================================
   LORYANE® — PUBLIC EDITORIAL PAGES

   The botanical language is drawn with CSS so editorial text remains
   searchable HTML and no decorative image carries essential information.
   ========================================================= */

.brand-editorial {
    background:
        radial-gradient(
            circle at 92% 4rem,
            rgb(var(--color-brand-rose-rgb) / 44%),
            transparent 24rem
        ),
        var(--color-background);
}

.brand-editorial .page-layout__container {
    width: min(100%, var(--width-content-lg));
}

.brand-editorial .page-layout__header {
    position: relative;
    max-width: var(--width-content-md);
    overflow: hidden;
    padding: var(--space-6);
    background:
        linear-gradient(
            135deg,
            rgb(var(--color-surface-rgb) / 98%),
            rgb(var(--color-brand-rose-rgb) / 32%)
        );
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.brand-editorial .page-layout__header::before,
.brand-editorial .page-layout__header::after {
    content: "";
    position: absolute;
    width: var(--space-12);
    height: var(--space-6);
    border: 1px solid rgb(var(--color-brand-champagne-rgb) / 58%);
    border-radius: 100% 0 100% 0;
    pointer-events: none;
}

.brand-editorial .page-layout__header::before {
    top: var(--space-5);
    right: var(--space-6);
    transform: rotate(-18deg);
}

.brand-editorial .page-layout__header::after {
    top: var(--space-10);
    right: var(--space-3);
    transform: rotate(22deg) scale(0.72);
}

.brand-editorial .page-layout__header > * {
    position: relative;
    z-index: 1;
}

.brand-editorial .page-layout__title {
    max-width: 14ch;
}

.brand-editorial .page-layout__intro {
    max-width: 40rem;
}

.brand-editorial .page-layout__content {
    display: grid;
    gap: var(--space-5);
}

.brand-editorial .page-layout__content > section {
    max-width: var(--width-content-md);
    padding: var(--space-6);
    background: rgb(var(--color-surface-rgb) / 94%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.brand-editorial .page-layout__content > section:nth-child(even) {
    background:
        linear-gradient(
            145deg,
            var(--color-surface),
            var(--color-surface-accent)
        );
}

.brand-editorial .page-layout__content > section h2 {
    margin: var(--space-0) var(--space-0) var(--space-4);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
}

.brand-editorial .page-layout__content > section p {
    max-width: 46rem;
    line-height: var(--line-height-relaxed);
}

.brand-editorial .page-layout__content > section > :last-child {
    margin-bottom: var(--space-0);
}

.brand-editorial .page-layout__list-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-5);
}

.brand-editorial .ui-card {
    min-width: 0;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgb(var(--color-brand-champagne-rgb) / 24%),
            transparent 12rem
        ),
        var(--color-surface);
    border-radius: var(--radius-xl);
}

.brand-editorial .ui-card__eyebrow {
    color: var(--color-brand-primary);
}

@media (min-width: 48rem) {
    .brand-editorial .page-layout__header,
    .brand-editorial .page-layout__content > section {
        padding: var(--space-8);
    }

    .brand-editorial.brand-history .page-layout__title {
        max-width: none;
        white-space: nowrap;
    }
}

@media (max-width: 35.999rem) {
    .brand-editorial .page-layout__header::before,
    .brand-editorial .page-layout__header::after {
        opacity: 0.5;
    }
}