/* ==========================================================================
   Block content styles — Particology

   Loaded by the parent theme on the front end and in the editor canvas, so
   a rule written here applies to both (see pb-boilerplate/inc/enqueue.php).
   ========================================================================== */

/* ==========================================================================
   Accordion — Profile style (is-style-profile)

   The team listing on the About page. Each item holds four blocks:

     core/image              the photograph
     core/accordion-heading  the name — this is the toggle button
     core/paragraph          the job title
     core/accordion-panel    the biography

   The heading is the only interactive part core gives us, so its button
   carries a transparent overlay that makes the whole header row clickable,
   exactly as the old pb/accordion header group was. The panel sits above
   the overlay so its own text stays selectable.

   Replaces the deprecated pb/accordion block and its accordion-profile.css.
   ========================================================================== */

.wp-block-accordion.is-style-profile {
    --profile--photo-size: 115px;
    --profile--column-gap: 24px;
    --profile--toggle-space: 60px;
    --profile--border-colour: var(--wp--preset--color--lilac-grey);
    /* Only ever an upper bound for the opening animation — see the panel */
    --pb-accordion--panel-max-height: 60rem;
    /* Vertical centre of the header row: the item's top padding plus half
       the photo. The toggle icon is pinned here at every width so it does
       not drift down the item as the panel opens. */
    --profile--toggle-offset: calc(24px + (var(--profile--photo-size) / 2));
}

.is-style-profile .wp-block-accordion-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--profile--photo-size) minmax(0, 1fr);
    /* The photo spans the first two rows, so its extra height is shared
       equally between them: the name sits at the bottom of the first and
       the job title at the top of the second, which centres the pair
       against the photo whatever its aspect ratio. The third row takes
       whatever height the open panel needs, so a long biography cannot
       drag the header down the item. */
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "photo name"
        "photo role"
        "panel panel";
    column-gap: var(--profile--column-gap);
    padding: 24px var(--profile--toggle-space) 24px 0;
    border-bottom: 1px solid var(--profile--border-colour);
}

.is-style-profile .wp-block-accordion-item:first-child {
    border-top: 1px solid var(--profile--border-colour);
}

/* The item still carries core's flow layout, which puts a block gap above
   every child after the first. The grid places them, so those margins only
   push the photo, name and panel out of their rows. */
.is-style-profile .wp-block-accordion-item > * {
    margin-block: 0;
}

/* The photograph */
.is-style-profile .wp-block-accordion-item > .wp-block-image {
    grid-area: photo;
    align-self: start;
    margin: 0;
}

.is-style-profile .wp-block-accordion-item > .wp-block-image img {
    display: block;
    width: var(--profile--photo-size);
    height: auto;
}

/* The photograph carries a Lavender duotone, applied per image in the
   editor. Restore its own colours once the item is open. Core writes its
   duotone rule with !important, which can only be answered in kind. */
.is-style-profile .wp-block-accordion-item.is-open .wp-block-image img {
    filter: none !important;
}

/* The name — core's toggle button, stripped back to the heading's own type */
.is-style-profile .wp-block-accordion-heading {
    grid-area: name;
    align-self: end;
    margin: 0;
}

.is-style-profile .wp-block-accordion-heading__toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

/* Core underlines the title on hover. The whole row is the control here,
   so an underline under the name alone reads as a link that is not one. */
.is-style-profile .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.is-style-profile .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}

/* The overlay that makes the whole header row clickable */
.is-style-profile .wp-block-accordion-heading__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
}

.is-style-profile .wp-block-accordion-heading__toggle:focus-visible {
    outline: none;
}

.is-style-profile .wp-block-accordion-heading__toggle:focus-visible::after {
    outline: 2px solid var(--wp--preset--color--royal-purple);
    outline-offset: -4px;
}

/* The job title */
.is-style-profile .wp-block-accordion-item > p {
    grid-area: role;
    align-self: start;
    margin: 0;
    color: var(--wp--preset--color--heather);
}

/* The toggle icon — core renders a "+" character inside the button, which
   is hidden in favour of the brand's plus and minus marks.
 *
 * The marks are painted on the item rather than on core's own span so that
 * they are positioned against the item in the editor too: the editor gives
 * every block wrapper position: relative, which would otherwise make the
 * heading the containing block and strand the icon beside the name. */
.is-style-profile .wp-block-accordion-heading__toggle-icon {
    display: none;
}

.is-style-profile .wp-block-accordion-item::after {
    content: "";
    position: absolute;
    top: var(--profile--toggle-offset);
    right: 20px;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    /* The mark belongs to the item, so a click on it would miss the
       button's overlay underneath and never toggle the panel. */
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 4v20M4 14h20' stroke='%23190933' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Open, the mark becomes a minus */
.is-style-profile .wp-block-accordion-item.is-open::after {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 14h20' stroke='%23190933' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The biography. Raised above the header overlay so that text inside it
   can be selected and any links in it remain clickable. */
.is-style-profile .wp-block-accordion-panel {
    position: relative;
    z-index: 1;
    grid-area: panel;
    padding: 0 0 24px;
    color: var(--wp--preset--color--heather);
}

/* The panel's padding already sets the gap above the biography, so the
   first paragraph must not add its own margin on top of it. */
.is-style-profile .wp-block-accordion-panel > *:first-child {
    margin-top: 0;
}

/* The open and close animation the pb/accordion block used to run in
   JavaScript.
 *
 * Core closes a panel by setting hidden="until-found", which the browser
 * renders as content-visibility: hidden — a discrete value, so the switch
 * needs transition-behavior: allow-discrete to hold the panel on screen
 * for the length of the animation. The attribute itself is untouched, so
 * find-in-page still reaches a closed biography and opens it.
 *
 * The height animates through max-height rather than height, which cannot
 * be transitioned from a content-based size. The cap only has to exceed
 * the tallest biography; it is not a layout value and nothing is clipped
 * once the panel is open. */
@media (prefers-reduced-motion: no-preference) {
    .is-style-profile .wp-block-accordion-panel,
    .is-style-service .wp-block-accordion-panel {
        overflow: hidden;
        max-height: var(--pb-accordion--panel-max-height, 60rem);
        opacity: 1;
        transition:
            max-height 0.3s ease-out,
            opacity 0.3s ease-out,
            content-visibility 0.3s allow-discrete;
    }

    .is-style-profile .wp-block-accordion-panel[hidden],
    .is-style-service .wp-block-accordion-panel[hidden] {
        max-height: 0;
        opacity: 0;
    }

    /* Where the browser can interpolate to a content-based size, animate
       the height itself: the panel then takes the full 0.3s to reach its
       own height instead of racing through the capped distance. */
    @supports (interpolate-size: allow-keywords) {
        .is-style-profile .wp-block-accordion-panel,
        .is-style-service .wp-block-accordion-panel {
            interpolate-size: allow-keywords;
            max-height: none;
            height: auto;
            transition:
                height 0.3s ease-out,
                opacity 0.3s ease-out,
                content-visibility 0.3s allow-discrete;
        }

        .is-style-profile .wp-block-accordion-panel[hidden],
        .is-style-service .wp-block-accordion-panel[hidden] {
            height: 0;
            max-height: none;
        }
    }
}

/* From 992px the biography opens beside the header rather than below it */
@media (min-width: 992px) {
    /* The panel takes a little over half the row. The photo has a column of
       its own here, so an fr split would measure the header and the panel
       against each other without it and leave the biography too narrow; a
       percentage of the item keeps the two sides in the proportion the
       design uses. */
    .is-style-profile .wp-block-accordion-item {
        grid-template-columns:
            var(--profile--photo-size)
            minmax(0, 1fr)
            minmax(0, 50.5%);
        grid-template-areas:
            "photo name panel"
            "photo role panel"
            ".     .    panel";
    }

    /* Beside the header the biography needs top padding of its own, which
       it does not when it sits underneath. The 16px left padding adds to
       the column gap: the photo keeps the tighter one, and the extra space
       belongs between the header and the panel alone. */
    .is-style-profile .wp-block-accordion-panel {
        align-self: start;
        padding: 6px 0 6px 16px;
    }
}

/* ==========================================================================
   Accordion — Service style (is-style-service)

   The services listing. Each item holds four blocks:

     core/image              the service icon
     core/accordion-heading  the service name — this is the toggle button
     core/paragraph          the one-line summary
     core/accordion-panel    the detail and its capability tags

   Same arrangement as the Profile style above, but the panel always opens
   underneath, indented to line up with the name rather than the icon.

   Replaces the deprecated pb/accordion block in its default layout.
   ========================================================================== */

.wp-block-accordion.is-style-service {
    /* The old markup nominally split 15/85, but the columns block's own gap
       shrank the first column; 14% plus the gap lands the name where it has
       always sat. */
    --service--icon-column: 14%;
    --service--column-gap: 24px;
    --service--toggle-size: 28px;
    --service--border-colour: #e5e5e5;
}

.is-style-service .wp-block-accordion-item {
    position: relative;
    display: grid;
    grid-template-columns:
        var(--service--icon-column)
        minmax(0, 1fr)
        var(--service--toggle-size);
    grid-template-areas:
        "icon name    toggle"
        "icon summary toggle"
        ".    panel   panel";
    column-gap: var(--service--column-gap);
    padding: 24px 20px 24px 0;
    border-bottom: 1px solid var(--service--border-colour);
}

/* The item carries core's flow layout, which would add a block gap above
   every child after the first; the grid places them instead. */
.is-style-service .wp-block-accordion-item > * {
    margin-block: 0;
}

/* The icon */
.is-style-service .wp-block-accordion-item > .wp-block-image {
    grid-area: icon;
    align-self: center;
    margin: 0;
}

/* The service name — core's toggle button, stripped back to the heading's
   own type */
.is-style-service .wp-block-accordion-heading {
    grid-area: name;
    align-self: end;
    margin: 0;
}

.is-style-service .wp-block-accordion-heading__toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

/* Core underlines the title on hover; the whole row is the control here */
.is-style-service .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.is-style-service .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}

/* The overlay that makes the whole header row clickable */
.is-style-service .wp-block-accordion-heading__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
}

.is-style-service .wp-block-accordion-heading__toggle:focus-visible {
    outline: none;
}

.is-style-service .wp-block-accordion-heading__toggle:focus-visible::after {
    outline: 2px solid var(--wp--preset--color--royal-purple);
    outline-offset: -4px;
}

/* The one-line summary */
.is-style-service .wp-block-accordion-item > p {
    grid-area: summary;
    align-self: start;
    margin: 24px 0 0;
}

/* The toggle mark. Core's own icon span is hidden and the mark drawn on a
   pseudo-element of the item, which is a grid item in its own right: it
   therefore centres itself against the header however tall the summary
   grows, and needs no positioning that the editor could disturb. */
.is-style-service .wp-block-accordion-heading__toggle-icon {
    display: none;
}

.is-style-service .wp-block-accordion-item::after {
    content: "";
    grid-area: toggle;
    align-self: center;
    width: var(--service--toggle-size);
    height: var(--service--toggle-size);
    /* A click on the mark must reach the button's overlay underneath */
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 4v20M4 14h20' stroke='%23190933' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.is-style-service .wp-block-accordion-item.is-open::after {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 14h20' stroke='%23190933' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The detail, raised above the header overlay so its text stays selectable
   and the links inside it remain clickable */
.is-style-service .wp-block-accordion-panel {
    position: relative;
    z-index: 1;
    grid-area: panel;
    /* The old markup had the header's own bottom padding between it and the
       detail, on top of the gap the detail carried; the grid has no header
       element to hold it, so the panel carries both. */
    padding: 48px 0 0;
}

.is-style-service .wp-block-accordion-panel > *:first-child {
    margin-top: 0;
}

/* On a phone the old block tightened its own toggle space, and the service
   names are long enough to need it: without this the name column loses
   around 30px and words like "Characterisation" run up against the mark. */
@media (max-width: 767px) {
    .wp-block-accordion.is-style-service {
        --service--column-gap: 20px;
        --service--toggle-size: 24px;
    }

    .is-style-service .wp-block-accordion-item {
        padding-right: 8px;
    }
}