/* Gillish Canvas — frontend block styles.
 *
 * Loaded on every page that renders Canvas blocks (frontend) AND
 * inside the Sandbox iframe (so the editor canvas matches the
 * frontend, M3 territory). Single stylesheet, mobile-first.
 *
 * Each block's selectors live here — no per-block CSS files for
 * the runtime-driven blocks. Conditional Content keeps its own
 * stylesheet (`gc-conditional-block.css`) for the variant chrome.
 *
 * Per the SANDBOX-PIVOT direction: blocks lean on Gutenberg
 * `supports` for color / spacing / typography / border / shadow.
 * Author choices flow through `get_block_wrapper_attributes()`
 * as classes + inline styles, so the only Canvas-side CSS rules
 * are the structural ones that don't fit Gutenberg's controls
 * (responsive collapse, layout-essentials).
 */

/* ─── Container ─────────────────────────────────────────── */
/* Container is a Gutenberg-supports-driven primitive — every
 * styling choice (background, padding, border-radius, shadow,
 * typography, layout direction) comes from the author's sidebar
 * controls and is applied via Gutenberg's auto-generated classes
 * + inline styles. The only Canvas-side rule is `box-sizing` so
 * `padding` doesn't push the rendered width out of grid cells. */
.gc-container {
    box-sizing: border-box;
}

/* ─── Columns ──────────────────────────────────────────── */
/* Flex layout — each column sets its own `--gc-col-width` /
 * `flex-basis` via the inline style emitted by render_column().
 * Empty width = auto column that fills remaining row space. The
 * variation picker seeds %% widths at insert; the drag handles
 * between columns adjust those %% pairs as the designer tunes.
 *
 * Below 768px every column collapses to 100% basis regardless of
 * saved width — multi-column rows on phones produce illegible
 * 60-pixel columns. The collapse is opinionated, not configurable:
 * the variation library doesn't ship a "stay narrow on mobile"
 * option because every author who's tried that has regretted it. */
.gc-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    /* Block-gap from the author's sidebar choice flows through
     * Gutenberg's `--wp--style--block-gap` custom property; the
     * flex `gap` falls back to it. */
    gap: var(--wp--style--block-gap, 16px);
}
.gc-column {
    box-sizing: border-box;
    /* `min-width: 0` prevents flex items from overflowing when
     * inner content has long unbreakable strings. Standard
     * flex sizing trick — without this, a long URL inside a
     * 50% column pushes the column to its content width and
     * collapses its sibling. */
    min-width: 0;
    /* Default to "auto column, fill remaining space". Inline
     * style on the wrapper overrides this when the designer
     * picked a variation or set a width manually. */
    flex: 1 1 var(--gc-col-width, 0);
}
@media (max-width: 767px) {
    .gc-column {
        flex-basis: 100%;
    }
}

/* ─── Library: Author Bio Card ──────────────────────────── */
/* v2 layout: attribute-driven block. The render callback emits a
 * fixed BEM structure (__photo, __content, __name, __title, __bio,
 * __socials). No InnerBlocks, no theme.json-paintable inner
 * elements; the block paints its own minimal structural styles
 * + inherits the surrounding theme typography via the wrapper.
 *
 * Pure structural styling. No opinionated colors, no font choices
 * (text inherits from theme), no background. The author-set
 * background / text / border / spacing flow through
 * get_block_wrapper_attributes() so Style sidebar choices apply
 * via Gutenberg's `.has-*` classes. */
.gc-library-author-bio {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "photo content";
    column-gap: 1.5rem;
    align-items: start;
}
/* Photo: circular thumbnail sized via the --gc-photo-size custom
 * property the wrapper sets from the photoSize block attribute.
 * Authors pick 48–320px via the sidebar RangeControl; default
 * 128px. The image is object-fit: cover + border-radius: 50% so
 * an arbitrary photo crops to a clean circle. */
.gc-library-author-bio__photo {
    grid-area: photo;
    width: var(--gc-photo-size, 128px);
    height: var(--gc-photo-size, 128px);
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0;
}
/* Empty photo placeholder shown in the editor canvas when no
 * photo is selected. Frontend never renders this — the PHP render
 * skips the <img> when authorPhotoUrl is empty. Inherits the
 * same size as the real photo so designers see the final
 * footprint before they upload. */
.gc-library-author-bio__photo--placeholder {
    width: var(--gc-photo-size, 128px);
    height: var(--gc-photo-size, 128px);
    border-radius: 50%;
    background: linear-gradient( 135deg,
        oklch(94% 0.005 250 / 1) 0%,
        oklch(88% 0.005 250 / 1) 100%
    );
}
/* Content column. Use explicit margins on the children instead
 * of a flex `gap` so we can control spacing per-element — the
 * social-icon row needs to sit closer to the bio than the bio
 * sits to the title. */
.gc-library-author-bio__content {
    grid-area: content;
    min-width: 0;
}
.gc-library-author-bio__name {
    margin: 0;
    font-weight: 600;
}
.gc-library-author-bio__title {
    margin: 0.1rem 0 0;
    opacity: 0.7;
    font-size: 0.92em;
}
.gc-library-author-bio__bio {
    margin: 0.6rem 0 0;
}
/* Socials sit close to the bio — 0.5rem instead of the larger
 * block-gap the rest of the content uses. The user's specific
 * note: "knappene for sosiale medier må være litt nærmere
 * teksten" (the social buttons must be a bit closer to the text). */
.gc-library-author-bio__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}
.gc-library-author-bio__social-item {
    margin: 0;
    padding: 0;
}
/* Default (medium) social-button size. Modifier classes below
 * override for small / large. */
.gc-library-author-bio__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: currentColor;
    text-decoration: none;
    border-radius: 50%;
    opacity: 0.85;
    transition: opacity 120ms ease-out;
}
.gc-library-author-bio__social-link:hover,
.gc-library-author-bio__social-link:focus-visible {
    opacity: 1;
}
.gc-library-author-bio__social-link svg,
.gc-library-author-bio__social-svg svg {
    width: 18px;
    height: 18px;
    display: block;
}
/* The editor's preview wraps the SVG in a __social-svg span so
 * `dangerouslySetInnerHTML` can drop the SVG markup without
 * fighting React's reconciliation on a self-closing element.
 * Frontend's PHP render skips this wrapper — same selectors apply. */
.gc-library-author-bio__social-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Size modifiers — wrapper class set by both editor + render. */
.gc-library-author-bio--icons-small .gc-library-author-bio__social-link {
    width: 24px;
    height: 24px;
}
.gc-library-author-bio--icons-small .gc-library-author-bio__social-link svg,
.gc-library-author-bio--icons-small .gc-library-author-bio__social-svg svg {
    width: 14px;
    height: 14px;
}
.gc-library-author-bio--icons-large .gc-library-author-bio__social-link {
    width: 40px;
    height: 40px;
}
.gc-library-author-bio--icons-large .gc-library-author-bio__social-link svg,
.gc-library-author-bio--icons-large .gc-library-author-bio__social-svg svg {
    width: 22px;
    height: 22px;
}
/* Below 480px, the photo stacks above the text. The single
 * narrow-screen breakpoint matches the convention the rest of
 * gc-blocks-frontend uses (Columns collapses at 768px). Author
 * Bio is denser and only needs to break later, when the photo
 * actually gets too cramped next to the text. */
@media (max-width: 479px) {
    .gc-library-author-bio {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "content";
        row-gap: 1rem;
    }
    .gc-library-author-bio__photo,
    .gc-library-author-bio__photo--placeholder {
        width: 72px;
        height: 72px;
    }
}

/* ─── Library: Trust Badges ─────────────────────────────── */
/* Horizontal strip of trust signals. Each badge's height comes from
 * the --gc-badge-height custom property the wrapper sets; width
 * scales to the image's aspect ratio. Grayscale-by-default keeps
 * mixed brand-colour logos from clashing on the page. */
.gc-library-trust-badges {
    box-sizing: border-box;
}
.gc-library-trust-badges__heading {
    margin: 0 0 0.75rem;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    text-align: center;
}
.gc-library-trust-badges--align-start .gc-library-trust-badges__heading       { text-align: left; }
.gc-library-trust-badges--align-end   .gc-library-trust-badges__heading       { text-align: right; }
.gc-library-trust-badges--align-space-between .gc-library-trust-badges__heading { text-align: left; }
.gc-library-trust-badges__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gc-library-trust-badges--align-center        .gc-library-trust-badges__list { justify-content: center; }
.gc-library-trust-badges--align-start         .gc-library-trust-badges__list { justify-content: flex-start; }
.gc-library-trust-badges--align-end           .gc-library-trust-badges__list { justify-content: flex-end; }
.gc-library-trust-badges--align-space-between .gc-library-trust-badges__list { justify-content: space-between; }
.gc-library-trust-badges__item {
    margin: 0;
    padding: 0;
}
.gc-library-trust-badges__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.gc-library-trust-badges__img {
    display: block;
    height: var(--gc-badge-height, 48px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: filter 180ms ease-out, opacity 180ms ease-out;
}
.gc-library-trust-badges--grayscale .gc-library-trust-badges__img {
    filter: grayscale(100%);
    opacity: 0.75;
}
.gc-library-trust-badges--grayscale .gc-library-trust-badges__img:hover,
.gc-library-trust-badges--grayscale .gc-library-trust-badges__link:hover .gc-library-trust-badges__img,
.gc-library-trust-badges--grayscale .gc-library-trust-badges__link:focus-visible .gc-library-trust-badges__img {
    filter: grayscale(0);
    opacity: 1;
}
.gc-library-trust-badges__placeholder {
    padding: 1.5rem;
    border: 1px dashed currentColor;
    border-radius: 4px;
    opacity: 0.5;
    text-align: center;
    font-size: 0.9em;
    font-style: italic;
}

/* ─── Library: Testimonial ──────────────────────────────── */
/* Two layout modes: stacked (default) and side-by-side. Side-by-side
 * uses a flex row with a larger photo to the left; collapses back to
 * stacked under 600px viewport. */
.gc-library-testimonial {
    box-sizing: border-box;
    margin: 0;
}
.gc-library-testimonial__quote {
    margin: 0;
    font-size: 1.15em;
    line-height: 1.5;
    quotes: "\201C" "\201D" "\2018" "\2019";
}
.gc-library-testimonial__quote p {
    margin: 0;
}
/* Decorative opening quote glyph using ::before. Theme can override
 * by setting `quotes: none` on the wrapper. */
.gc-library-testimonial__quote::before {
    content: open-quote;
    font-size: 2.4em;
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: 0.1em;
    opacity: 0.35;
}
.gc-library-testimonial__quote--placeholder {
    opacity: 0.5;
    font-style: italic;
}
.gc-library-testimonial__caption {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    font-style: normal;
    font-size: 0.95em;
}
.gc-library-testimonial__photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.gc-library-testimonial__photo--placeholder {
    background: linear-gradient( 135deg,
        oklch(94% 0.005 250 / 1) 0%,
        oklch(88% 0.005 250 / 1) 100%
    );
}
.gc-library-testimonial__cite {
    display: flex;
    flex-direction: column;
    font-style: normal;
    line-height: 1.3;
}
.gc-library-testimonial__name {
    font-weight: 600;
}
.gc-library-testimonial__title {
    opacity: 0.7;
    font-size: 0.9em;
}
.gc-library-testimonial__rating {
    margin-left: auto;
    color: oklch(75% 0.16 80);
    letter-spacing: 0.1em;
    font-size: 1.05em;
    line-height: 1;
}
/* Side-by-side layout: feature photo on the left, quote + caption
 * stacked on the right. Markup mirrors the layout: PHP renders the
 * photo as a sibling of <blockquote>+<figcaption> in this mode (as
 * a .gc-library-testimonial__photo-feature wrapper). Stacked mode
 * keeps the photo inside the caption row. */
.gc-library-testimonial--layout-side-by-side {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.5rem;
    align-items: center;
}
.gc-library-testimonial--layout-side-by-side > .gc-library-testimonial__photo-feature {
    grid-row: 1 / span 2;
    align-self: center;
}
.gc-library-testimonial--layout-side-by-side > .gc-library-testimonial__photo-feature .gc-library-testimonial__photo {
    width: 112px;
    height: 112px;
}
.gc-library-testimonial--layout-side-by-side > .gc-library-testimonial__quote {
    grid-column: 2;
}
.gc-library-testimonial--layout-side-by-side > .gc-library-testimonial__caption {
    grid-column: 2;
    margin-top: 0.6rem;
}
@media (max-width: 599px) {
    .gc-library-testimonial--layout-side-by-side {
        display: block;
    }
    .gc-library-testimonial--layout-side-by-side > .gc-library-testimonial__photo-feature {
        margin-bottom: 0.75rem;
    }
    .gc-library-testimonial--layout-side-by-side > .gc-library-testimonial__photo-feature .gc-library-testimonial__photo {
        width: 72px;
        height: 72px;
    }
}

/* ─── Library: Section Divider ──────────────────────────── */
.gc-library-section-divider {
    box-sizing: border-box;
    text-align: center;
    color: currentColor;
}
.gc-library-section-divider__rule {
    border: 0;
    border-top: var(--gc-divider-thickness, 1px) solid currentColor;
    opacity: 0.25;
    width: var(--gc-divider-width, 100%);
    margin: 0 auto;
}
.gc-library-section-divider__mark {
    display: inline-block;
    letter-spacing: 0.4em;
    font-size: 1.1em;
    opacity: 0.55;
}
.gc-library-section-divider__wave {
    display: block;
    width: var(--gc-divider-width, 100%);
    margin: 0 auto;
    color: currentColor;
    opacity: 0.5;
    /* Height grows with thickness so the wave's undulation has
     * room to breathe even at thicker strokes. `max(16px, …)`
     * keeps thin strokes at the original 16px (no visible regression
     * for default thickness 1); thickness ≥ 5 starts adding height. */
    height: max( 16px, calc( var(--gc-divider-thickness, 1px) * 4px ) );
}
.gc-library-section-divider__wave path {
    /* SVG 2 lets stroke-width be set via CSS in real pixel units
     * (Chrome 33+, FF 39+, Safari 9+). `vector-effect: non-scaling-stroke`
     * keeps the stroke at the exact px value regardless of how
     * `preserveAspectRatio="none"` stretches the path horizontally,
     * so the user-set thickness reads true. */
    stroke-width: var(--gc-divider-thickness, 1.5px);
    vector-effect: non-scaling-stroke;
}
/* Wave + author-applied shadow: Canvas's StyleAttribute writes a
 * rectangular `box-shadow` onto the wrapper, which makes the shadow
 * look like a bar floating below the wave instead of the wave-
 * shaped shadow the author actually wants. We suppress the wrapper
 * shadow and apply a `filter: drop-shadow()` on the SVG path
 * instead — drop-shadow follows the path's alpha channel, so the
 * shadow takes the wave's exact shape. The exact x/y/blur the user
 * picked aren't echoed (CSS can't parse the box-shadow inline style
 * value), but the *presence* of a shadow with a tasteful default
 * shape is preserved. */
.gc-library-section-divider--wave[style*="box-shadow"] {
    box-shadow: none !important;
}
.gc-library-section-divider--wave[style*="box-shadow"] .gc-library-section-divider__wave {
    filter:
        drop-shadow( 0 1px 1px color-mix( in oklab, currentColor 35%, transparent ) )
        drop-shadow( 0 2px 4px color-mix( in oklab, currentColor 25%, transparent ) );
}
/* Labelled divider: rule with centered text. The text sits on a
 * solid background (theme-controlled via wrapper bg) so the rule
 * appears to pass behind it.
 *
 * The width slider applies here too — the wrapper shrinks to the
 * configured percentage and auto-margins re-centre it. (Line + wave
 * variants shrink the inner mark; label's mark IS the flex row,
 * so the wrapper itself has to shrink.) */
.gc-library-section-divider--label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: var(--gc-divider-width, 100%);
    margin-left: auto;
    margin-right: auto;
}
.gc-library-section-divider--label::before,
.gc-library-section-divider--label::after {
    content: "";
    flex: 1;
    border-top: var(--gc-divider-thickness, 1px) solid currentColor;
    opacity: 0.25;
}
.gc-library-section-divider__label-text {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

/* ─── Library: FAQ ──────────────────────────────────────── */
.gc-library-faq {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.gc-library-faq__item {
    border: 1px solid currentColor;
    border-color: color-mix( in oklab, currentColor 15%, transparent );
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
}
.gc-library-faq__question {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    user-select: none;
}
/* Hide native disclosure triangle; we draw our own. */
.gc-library-faq__question::-webkit-details-marker { display: none; }
.gc-library-faq__question::marker                  { content: ""; }
/* Drawn chevron via ::after — rotates when [open]. */
.gc-library-faq__question::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.55;
    flex-shrink: 0;
    transition: transform 180ms ease-out;
}
.gc-library-faq__item[open] .gc-library-faq__question::after {
    transform: rotate(-135deg) translateY(2px);
}
.gc-library-faq__answer {
    padding: 0 1rem 1rem;
    line-height: 1.55;
}
.gc-library-faq__answer p:first-child { margin-top: 0; }
.gc-library-faq__answer p:last-child  { margin-bottom: 0; }
.gc-library-faq__placeholder {
    padding: 1.5rem;
    border: 1px dashed currentColor;
    border-radius: 4px;
    opacity: 0.5;
    text-align: center;
    font-size: 0.9em;
    font-style: italic;
}

/* ─── Library: Table of Contents ─────────────────────────── */
.gc-library-toc {
    box-sizing: border-box;
}
.gc-library-toc__title {
    margin: 0 0 0.75rem;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}
.gc-library-toc__title--summary {
    cursor: pointer;
    list-style: none;
}
.gc-library-toc__title--summary::-webkit-details-marker { display: none; }
.gc-library-toc__title--summary::marker                  { content: ""; }
.gc-library-toc__list {
    margin: 0;
    padding: 0 0 0 1.25rem;
    line-height: 1.6;
}
.gc-library-toc__list--nested {
    padding-left: 1rem;
    margin: 0.2rem 0 0.4rem;
}
.gc-library-toc--numbered .gc-library-toc__list {
    list-style: decimal;
}
.gc-library-toc--numbered .gc-library-toc__list--nested {
    list-style: lower-alpha;
}
.gc-library-toc__item {
    margin: 0;
}
.gc-library-toc__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms ease-out, opacity 120ms ease-out;
    opacity: 0.85;
}
.gc-library-toc__link:hover,
.gc-library-toc__link:focus-visible {
    border-bottom-color: currentColor;
    opacity: 1;
}
/* Collapsible mobile: <details> open by default on desktop; below
 * 768px the user can collapse it. We don't auto-collapse on mobile
 * — author choice — but the affordance is there. */
.gc-library-toc--collapsible .gc-library-toc__details > summary {
    position: relative;
    padding-right: 1.5rem;
}
.gc-library-toc--collapsible .gc-library-toc__details > summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0.4em;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    transition: transform 180ms ease-out;
}
.gc-library-toc--collapsible .gc-library-toc__details[open] > summary::after {
    transform: rotate(-135deg);
}
/* Editor-preview-only styling — softer, with a note below the list. */
.gc-library-toc--editor-preview {
    border: 1px dashed currentColor;
    border-color: color-mix( in oklab, currentColor 20%, transparent );
    padding: 1rem;
    border-radius: 4px;
}