/* ==========================================================================
   Bio block store: /blocks on the bio host (bio-blocks.php).

   Built on the Landing 6 kit (the25-landing6.css), the bio landing's rules
   (the25-site6-bio.css: kicker, claim form, "Paid plan" tag) and the template
   gallery's (the25-site6-biotpl.css: facts row, template cards), which apply
   because the <main> carries .l6-page--bio and .l6-page--biotpl too.
   Everything here is scoped under .l6-page--bioblk. Behaviour:
   js/the25-site6-bioblk.js.

   A listing is a store listing: icon, name and line, then two or three
   screenshot cards. Each card wears the colours of the page its picture was
   taken on, so a crop of a block sits on its own background without a seam.
   ========================================================================== */

/* The kit's page gutter (.l6-wrap), for rows that run to the screen's edge */
.l6-page--bioblk {
    --bs-gutter: 24px;
}

@media (max-width: 640px) {
    .l6-page--bioblk {
        --bs-gutter: 16px;
    }
}

/* ---- Hero ----------------------------------------------------------------- */

.l6-page--bioblk .bs-hero {
    padding-bottom: clamp(44px, 5vw, 72px);
}

.l6-page--bioblk .bs-hero-inner--collage {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

.l6-page--bioblk .bs-hero .l6-display {
    max-width: 14em;
    color: #fff;
}

.l6-page--bioblk .bs-hero .l6-display em {
    color: var(--l6-sky);
    font-style: normal;
}

.l6-page--bioblk .bs-hero .l6-lead {
    max-width: 40em;
    color: rgba(255, 255, 255, 0.78);
}

/* Blocks cut out of real pages, scattered like cards on a table */
.l6-page--bioblk .bs-collage {
    position: relative;
    height: 420px;
}

.l6-page--bioblk .bs-collage-pic {
    position: absolute;
    width: 236px;
    height: auto;
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 26px 50px -22px rgba(0, 0, 0, 0.8);
}

.l6-page--bioblk .bs-collage-pic--0 { top: 0;     left: 4%;  transform: rotate(-6deg); }
.l6-page--bioblk .bs-collage-pic--1 { top: 18px;  right: 2%; transform: rotate(5deg); z-index: 2; }
.l6-page--bioblk .bs-collage-pic--2 { top: 168px; left: 20%; transform: rotate(-2deg); z-index: 3; }
.l6-page--bioblk .bs-collage-pic--3 { top: 250px; right: 0;  transform: rotate(7deg); z-index: 1; }
.l6-page--bioblk .bs-collage-pic--4 { top: 290px; left: 0;   transform: rotate(4deg); z-index: 4; }

@media (max-width: 1000px) {
    .l6-page--bioblk .bs-hero-inner--collage {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--bioblk .bs-collage {
        display: none;
    }
}

/* ---- Layout: the group list beside the listings ----------------------------- */

.l6-page--bioblk .bs-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
    padding-top: clamp(36px, 4vw, 56px);
    padding-bottom: clamp(56px, 7vw, 96px);
}

.l6-page--bioblk .bs-nav {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
}

.l6-page--bioblk .bs-nav-group + .bs-nav-group {
    margin-top: 18px;
}

.l6-page--bioblk .bs-nav-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}

.l6-page--bioblk .bs-nav-head small {
    color: var(--l6-muted);
    font-family: var(--l6-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.l6-page--bioblk .bs-nav-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.l6-page--bioblk .bs-nav-list a {
    display: block;
    margin-left: -10px;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--l6-body);
    font-size: 0.92rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.l6-page--bioblk .bs-nav-list a:hover {
    color: var(--l6-ink);
    background: var(--l6-haze);
}

.l6-page--bioblk .bs-nav-list a[aria-current="true"] {
    color: var(--l6-ink);
    background: var(--l6-haze);
    font-weight: 700;
}

.l6-page--bioblk .bs-nav a:focus-visible {
    outline: 3px solid var(--l6-blue);
    outline-offset: 1px;
}

/* ---- Groups and listings ------------------------------------------------------ */

.l6-page--bioblk .bs-group + .bs-group {
    margin-top: clamp(40px, 5vw, 64px);
}

.l6-page--bioblk .bs-group,
.l6-page--bioblk .bs-item {
    scroll-margin-top: 92px;
}

.l6-page--bioblk .bs-group-head .l6-h2 {
    margin: 0;
}

.l6-page--bioblk .bs-group-head p {
    max-width: 40em;
    margin: 10px 0 0;
    color: var(--l6-body);
    font-size: 1.05rem;
}

.l6-page--bioblk .bs-item {
    padding: clamp(28px, 3vw, 40px) 0 0;
}

.l6-page--bioblk .bs-item + .bs-item {
    margin-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--l6-line);
}

.l6-page--bioblk .bs-item-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 18px;
    align-items: center;
    margin-bottom: 20px;
}

/* The listing's app icon: one of our own icons on a rounded tile */
.l6-page--bioblk .bs-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 1px solid var(--l6-line);
    border-radius: 17px;
    background: linear-gradient(180deg, #fff 0%, var(--l6-haze) 100%);
    color: var(--l6-ink);
}

.l6-page--bioblk .bs-icon .s6-ico {
    width: 30px;
    height: 30px;
}

.l6-page--bioblk .bs-item-copy h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.l6-page--bioblk .bs-item-copy p {
    margin: 4px 0 0;
    color: var(--l6-body);
    font-size: 1rem;
    line-height: 1.45;
}

.l6-page--bioblk .bs-works {
    max-width: 260px;
    margin: 0;
    color: var(--l6-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    text-align: right;
}

.l6-page--bioblk .bs-works span {
    display: block;
    color: var(--l6-ink);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Screenshot cards ------------------------------------------------------- */

.l6-page--bioblk .bs-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Two shots: the second card takes the room of two */
.l6-page--bioblk .bs-shots--2 .bs-shot:last-child {
    grid-column: span 2;
}

.l6-page--bioblk .bs-shot {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 7 / 8;
    overflow: hidden;
    border-radius: 22px;
    background: var(--bs-bg, var(--l6-haze));
    color: var(--bs-ink, var(--l6-ink));
}

/* The wide card takes the row's height (set by its square neighbour), not
   its picture's: size containment keeps the picture out of the row sizing. */
.l6-page--bioblk .bs-shots--2 .bs-shot:last-child {
    aspect-ratio: auto;
    contain: size;
}

/* A hairline, drawn over the picture so light cards keep their edge on white */
.l6-page--bioblk .bs-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(13, 27, 46, 0.09);
    pointer-events: none;
}

.l6-page--bioblk .bs-cap {
    margin: 0;
    padding: 20px 22px 12px;
    font-family: var(--l6-display);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
}

.l6-page--bioblk .bs-pic {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 2px 16px 18px;
}

.l6-page--bioblk .bs-shot--crop img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
}

/* A phone, cut by the bottom of its card */
.l6-page--bioblk .bs-shot--phone .bs-pic {
    align-items: flex-start;
    padding: 4px 0 0;
}

.l6-page--bioblk .bs-shot--phone img {
    display: block;
    width: min(64%, 230px);
    height: auto;
    border: 7px solid #0d1b2e;
    border-bottom: 0;
    border-radius: 34px 34px 0 0;
    /* The light ring keeps the bezel visible on a dark page's card */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 22px 48px -18px rgba(13, 27, 46, 0.55);
}

/* Where the card cuts the phone, the screen fades into the card: the cut then
   reads as framing wherever it falls on the page inside. */
.l6-page--bioblk .bs-shot--phone .bs-pic {
    position: relative;
}

.l6-page--bioblk .bs-shot--phone .bs-pic::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--bs-bg));
    pointer-events: none;
}

.l6-page--bioblk .bs-shot--bottom .bs-pic::after {
    top: 0;
    bottom: auto;
    background: linear-gradient(to top, transparent, var(--bs-bg));
}

.l6-page--bioblk .bs-shot--center .bs-pic::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 48px;
    background: linear-gradient(to top, transparent, var(--bs-bg));
    pointer-events: none;
}

/* A phone whose subject sits lower on its screen (an open sheet, a photo
   shown full screen): the card shows its middle or its bottom instead. */
.l6-page--bioblk .bs-shot--center .bs-pic,
.l6-page--bioblk .bs-shot--bottom .bs-pic {
    overflow: hidden;
    padding: 0;
}

.l6-page--bioblk .bs-shot--center .bs-pic {
    align-items: center;
}

.l6-page--bioblk .bs-shot--bottom .bs-pic {
    align-items: flex-end;
}

.l6-page--bioblk .bs-shot--center img,
.l6-page--bioblk .bs-shot--bottom img {
    border-bottom: 7px solid #0d1b2e;
    border-radius: 34px;
}

/* ---- "On templates" ------------------------------------------------------------ */

.l6-page--bioblk .bs-seen {
    margin: 14px 0 0;
    color: var(--l6-muted);
    font-size: 0.92rem;
}

.l6-page--bioblk .bs-seen a {
    color: var(--l6-blue-deep);
    font-weight: 600;
    text-decoration: none;
}

.l6-page--bioblk .bs-seen a:hover {
    text-decoration: underline;
}

/* ---- Templates strip -------------------------------------------------------------- */

.l6-page--bioblk .bs-tpl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 32px;
    margin-bottom: clamp(24px, 3vw, 36px);
}

.l6-page--bioblk .bs-tpl-head .l6-head {
    margin-bottom: 0;
}

.l6-page--bioblk .bs-tpl-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--l6-blue-deep);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.l6-page--bioblk .bs-tpl-all .s6-ico {
    width: 18px;
    height: 18px;
}

/* Four templates: four across or two across, never three and one alone (the
   gallery's own rule fills the row with as many as fit). */
@media (min-width: 701px) and (max-width: 1100px) {
    .l6-page--bioblk .bt-grid--row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .l6-page--bioblk .bt-grid--row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Narrower screens ---------------------------------------------------------------- */

@media (max-width: 1180px) {
    .l6-page--bioblk .bs-item-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .l6-page--bioblk .bs-works {
        grid-column: 2;
        max-width: none;
        text-align: left;
    }

    .l6-page--bioblk .bs-works span {
        display: inline;
        margin-right: 4px;
    }
}

/* The group list becomes a row of chips that stays under the site header */
@media (max-width: 1000px) {
    .l6-page--bioblk .bs-layout {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 0;
    }

    /* Under the site header, 64px tall at these widths */
    .l6-page--bioblk .bs-nav {
        top: 64px;
        z-index: 20;
        display: flex;
        gap: 8px;
        max-height: none;
        margin: 0 calc(var(--bs-gutter) * -1);
        padding: 12px var(--bs-gutter);
        overflow-x: auto;
        overflow-y: hidden;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid var(--l6-line);
        backdrop-filter: saturate(1.4) blur(10px);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        scrollbar-width: none;
        /* The last chips fade out at the edge: there is more to scroll to */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }

    .l6-page--bioblk .bs-nav::-webkit-scrollbar {
        display: none;
    }

    .l6-page--bioblk .bs-nav-group + .bs-nav-group {
        margin-top: 0;
    }

    .l6-page--bioblk .bs-nav-list {
        display: none;
    }

    .l6-page--bioblk .bs-nav-head {
        padding: 9px 14px;
        border: 1px solid var(--l6-line);
        border-radius: 999px;
        background: #fff;
        font-size: 0.92rem;
        white-space: nowrap;
    }

    .l6-page--bioblk .bs-nav-head[aria-current="true"] {
        border-color: var(--l6-ink);
        background: var(--l6-ink);
        color: #fff;
    }

    .l6-page--bioblk .bs-nav-head[aria-current="true"] small {
        color: rgba(255, 255, 255, 0.72);
    }

    .l6-page--bioblk .bs-store {
        padding-top: 28px;
    }

    /* Header (64px) + chip row (about 60px) */
    .l6-page--bioblk .bs-group,
    .l6-page--bioblk .bs-item {
        scroll-margin-top: 136px;
    }
}

/* Phones: the cards swipe sideways, a little of the next one showing */
@media (max-width: 760px) {
    .l6-page--bioblk .bs-shots {
        grid-template-columns: none;
        grid-auto-columns: min(78%, 300px);
        grid-auto-flow: column;
        margin: 0 calc(var(--bs-gutter) * -1);
        padding: 0 var(--bs-gutter) 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--bs-gutter);
        scrollbar-width: none;
    }

    .l6-page--bioblk .bs-shots::-webkit-scrollbar {
        display: none;
    }

    .l6-page--bioblk .bs-shot {
        scroll-snap-align: start;
    }

    .l6-page--bioblk .bs-shots--2 .bs-shot:last-child {
        grid-column: auto;
        aspect-ratio: 7 / 8;
        contain: none;
    }

    .l6-page--bioblk .bs-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .l6-page--bioblk .bs-icon .s6-ico {
        width: 26px;
        height: 26px;
    }

    .l6-page--bioblk .bs-item-copy h3 {
        font-size: 1.2rem;
    }

    .l6-page--bioblk .bs-item-head {
        margin-bottom: 16px;
    }

    .l6-page--bioblk .bs-works {
        grid-column: 1 / -1;
    }
}