/* =====================================================================================================================
   Page layouts (App\Support\PageLayouts; owner, 28 Oct 2026): how the header and blocks are arranged, on top of any
   theme. The layer carries `ly-<layout>`; the header (photo, name, bio, socials, collab chip) sits in .mini__head, which
   is `display: contents` unless a layout needs it as a box, so Classic and every theme draw exactly as before.
   Layouts only move things; the theme keeps its colours and type. A button with its own Block style (.bsx) keeps it.
   Free: Classic, Left · Pro: Right, Banner, Card, Profile, List · Business: Hero, Editorial, Grid.
   ===================================================================================================================== */
.mini__head { display: contents; }
.mini__banner { display: none; }

/* ---- Left / Right: the photo beside the name ---- */
.pg-layer:is(.ly-left, .ly-right) .mini__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 4px; width: 100%; margin-bottom: 8px; text-align: left; }
.pg-layer:is(.ly-left, .ly-right) .mini__head > :is(.mini__avatar, .studio__av) { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.pg-layer:is(.ly-left, .ly-right) .mini__head > :not(.mini__avatar, .studio__av, .mini__banner) { grid-column: 2; justify-self: start; margin-left: 0; margin-right: 0; text-align: left; }
.pg-layer:is(.ly-left, .ly-right) .mini__head > .mini__collab { grid-column: 1 / -1; }
.pg-layer:is(.ly-left, .ly-right) .mini__socials { justify-content: flex-start; }
.pg-layer.ly-right .mini__head { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.pg-layer.ly-right .mini__head > :is(.mini__avatar, .studio__av) { grid-column: 2; }
.pg-layer.ly-right .mini__head > :not(.mini__avatar, .studio__av, .mini__banner) { grid-column: 1; justify-self: end; text-align: right; }
.pg-layer.ly-right .mini__socials { justify-content: flex-end; }

/* ---- Banner (Pro) and Hero (Business): their cover photo (design.cover_photo), else their profile photo, across the
   top, fading into the page ---- */
.pg-layer:is(.ly-banner, .ly-hero) .mini__banner { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 152px; pointer-events: none;
  background: linear-gradient(135deg, var(--hl, var(--btn)), color-mix(in srgb, var(--btn) 55%, var(--bg))); background-size: cover; background-position: center 30%;
  -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent); }
.pg-layer:is(.ly-banner, .ly-hero) .mini__head > :not(.mini__banner) { position: relative; z-index: 1; }
/* their cover photo (App\Support\Covers): 1200 px on phones, 2400 px where the band is wider */
.pg-layer.has-cover .mini__banner { background-image: var(--cover-sm); }
@media (min-width: 600px) { .pg-layer.has-cover .mini__banner { background-image: var(--cover); } }
.pg-layer.ly-banner.ly-banner > .mini, .pub .pg-layer.ly-banner.ly-banner > .mini { padding-top: 96px; }
.pg-layer.ly-banner .mini__head > :is(.mini__avatar, .studio__av) { outline: 4px solid var(--bg); outline-offset: 0; }
.pg-layer.ly-hero .mini__banner { height: 320px; -webkit-mask: linear-gradient(#000 45%, transparent 96%); mask: linear-gradient(#000 45%, transparent 96%); }
.pg-layer.ly-hero.ly-hero > .mini, .pub .pg-layer.ly-hero.ly-hero > .mini { padding-top: 232px; }
/* Hero is their photo: the avatar would repeat it. With a cover photo of their own (has-cover), the avatar comes back
   over the band's lower edge, like Banner */
.pg-layer.ly-hero:not(.has-cover) .mini__head > :is(.mini__avatar, .studio__av) { display: none; }
.pg-layer.ly-hero.has-cover.has-cover > .mini, .pub .pg-layer.ly-hero.has-cover.has-cover > .mini { padding-top: 192px; }
.pg-layer.ly-hero.has-cover .mini__head > :is(.mini__avatar, .studio__av) { outline: 4px solid var(--bg); outline-offset: 0; }
.pg-layer.ly-hero .mini__name { font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; text-shadow: 0 2px 16px color-mix(in srgb, var(--bg) 85%, transparent); }

/* ---- Card (Pro): the header in a card of its own ---- */
.pg-layer.ly-card .mini__head { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; padding: 24px 16px; border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); border-radius: 20px;
  background: color-mix(in srgb, var(--fg) 8%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pg-layer.ly-card.ly-card > .mini, .pub .pg-layer.ly-card.ly-card > .mini { padding-top: 32px; }

/* ---- Profile (Pro): the header in one profile card, a cover band across its top and the photo on the band's edge,
   left-aligned below (dznir.com/example's arrangement, owner 28 Oct 2026). The band is their cover photo
   (design.cover_photo), else shapes in the theme's own colours. A theme can set --ly-card (Portfolio: white; --card is taken by some themes). ---- */
.pg-layer.ly-profile .mini__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px; width: 100%; margin-bottom: 8px; padding: 0 16px 16px; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); background: var(--ly-card, color-mix(in srgb, var(--fg) 7%, transparent)); box-shadow: 0 24px 48px -36px rgba(0, 0, 0, 0.4); text-align: left; }
.pg-layer.ly-profile .mini__banner { display: block; position: relative; width: calc(100% + 32px); height: 92px; margin: 0 -16px; pointer-events: none;
  background: radial-gradient(circle at 10% -20%, var(--hl) 0 42%, transparent 43%), radial-gradient(circle at 60% 120%, color-mix(in srgb, var(--hl) 45%, #FFB547) 0 34%, transparent 35%), radial-gradient(circle at 104% -10%, color-mix(in srgb, var(--hl) 40%, #7B5CFF) 0 44%, transparent 45%), color-mix(in srgb, var(--fg) 8%, var(--bg)); }
.pg-layer.ly-profile.vibe--folio .mini__banner { /* Portfolio: the example page's soft colour circles and dot grain */
  background: radial-gradient(rgba(20, 19, 17, 0.16) 1px, transparent 1.3px) 0 0 / 9px 9px, radial-gradient(circle at 12% -30%, #FF7A59 0 48%, transparent 49%), radial-gradient(circle at 58% 115%, color-mix(in srgb, #FFB547 85%, #FF7A59) 0 36%, transparent 37%), radial-gradient(circle at 100% -20%, color-mix(in srgb, #7B5CFF 80%, #FF7A59) 0 48%, transparent 49%), #E9E3D8; }
.pg-layer.ly-profile.has-cover .mini__banner { background: var(--cover-sm) center 30% / cover no-repeat; }
@media (min-width: 600px) { .pg-layer.ly-profile.has-cover .mini__banner { background-image: var(--cover); } }
.pg-layer.ly-profile .mini__head > :is(.mini__avatar, .studio__av) { position: relative; z-index: 1; margin: -36px 0 4px; outline: 3px solid var(--ly-card, var(--bg)); }
.pg-layer.ly-profile .mini__head > :not(.mini__banner, .mini__avatar, .studio__av) { justify-self: stretch; margin-left: 0; margin-right: 0; text-align: left; }
.pg-layer.ly-profile .mini__socials { justify-content: flex-start; margin: 8px 0 0; }
.pg-layer.ly-profile.ly-profile > .mini, .pub .pg-layer.ly-profile.ly-profile > .mini { padding-top: 24px; }

/* ---- List (Pro): a slim header row and the links as a clean list ---- */
.pg-layer.ly-list .mini__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 4px; width: 100%; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); text-align: left; }
/* the photo on the left; name, bio, social icons and the collab chip all lined up on the right (owner, 28 Oct) */
.pg-layer.ly-list .mini__head > :is(.mini__avatar, .studio__av) { grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; font-size: 16px; }
.pg-layer.ly-list .mini__head > :not(.mini__avatar, .studio__av, .mini__banner) { grid-column: 2; justify-self: start; margin-left: 0; margin-right: 0; text-align: left; }
.pg-layer.ly-list .mini__name { font-size: 18px; }
/* RK themes centre the name (side padding, a centred red underline): on the side-aligned layouts it lines up with the
   bio and icons instead. The padding on the far side stays: italic Anton leans past its box, and the name clips (for
   its light sweep), so without it the last letter was cut ("RISHABH K" read "RISHABH I"). */
.pg-layer:is(.ly-left, .ly-list, .ly-editorial).vibe--rkx .mini__name { padding-left: 0; padding-right: 10px; background-position: 0 100%; }
.pg-layer.ly-right.vibe--rkx .mini__name { padding-left: 10px; padding-right: 10px; margin-right: -10px; background-position: calc(100% - 10px) 100%; }
/* RK themes (with the logo): the logo is part of the background art, so a cover band would sit on top of it. Banner
   and Hero start the band just under the logo, and the page moves down to match. */
.pg-layer.vibe--rkx:not(.vibe--rkx-open):is(.ly-banner, .ly-hero) .mini__banner { top: 72px; }
.pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-banner.ly-banner > .mini, .pub .pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-banner.ly-banner > .mini { padding-top: 168px; }
.pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-hero.ly-hero > .mini, .pub .pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-hero.ly-hero > .mini { padding-top: 304px; }
.pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-hero.has-cover.has-cover > .mini, .pub .pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-hero.has-cover.has-cover > .mini { padding-top: 264px; }
/* RK Clean White's top-right paint splash sat behind the name and the red marker bio on the side layouts: it moves
   lower, behind the (now solid) cards */
.pg-layer.vibe--rk-white:is(.ly-left, .ly-list, .ly-right, .ly-editorial) .rkx-splat--a { top: 46%; }
/* Card keeps the room RK themes leave for the logo */
.pg-layer.vibe--rkx:not(.vibe--rkx-open):is(.ly-card, .ly-profile):is(.ly-card, .ly-profile) > .mini, .pub .pg-layer.vibe--rkx:not(.vibe--rkx-open):is(.ly-card, .ly-profile):is(.ly-card, .ly-profile) > .mini { padding-top: 80px; }
/* Neon Lime's rings and Violet Orbit's ring circle the photo where Classic puts it: they follow it down on Banner, Hero
   and Card, and sit out the layouts that move the photo to a side */
.pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-banner :is(.rkx-ring, .rkx-orbit) { top: 210px; }
.pg-layer.vibe--rkx-open.ly-banner :is(.rkx-ring, .rkx-orbit) { top: 138px; }
.pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-hero.has-cover :is(.rkx-ring, .rkx-orbit) { top: 306px; }
.pg-layer.vibe--rkx-open.ly-hero.has-cover :is(.rkx-ring, .rkx-orbit) { top: 234px; }
.pg-layer.vibe--rkx:not(.vibe--rkx-open).ly-card :is(.rkx-ring, .rkx-orbit) { top: 146px; }
.pg-layer.vibe--rkx:is(.ly-left, .ly-right, .ly-list, .ly-editorial, .ly-profile, .ly-hero:not(.has-cover)) :is(.rkx-ring, .rkx-orbit) { display: none; }
.pg-layer.ly-list .mini__socials { justify-content: flex-start; margin-bottom: 0; }
.pg-layer.ly-list .mini__links { gap: 0; }
.pg-layer.ly-list .mini__links > .blk-hook:has(> :not(.mini__link)) { margin: 8px 0; }
.pg-layer.ly-list :not(.bsx) > .mini__link { padding: 16px 4px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); border-radius: 0; background: transparent; color: var(--fg); box-shadow: none; clip-path: none; text-align: left; transform: none; }

/* ---- Editorial (Business): the name huge, like a magazine cover ---- */
.pg-layer.ly-editorial .mini__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; row-gap: 8px; width: 100%; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 2px solid var(--fg); text-align: left; }
.pg-layer.ly-editorial .mini__head > :is(.mini__avatar, .studio__av) { grid-column: 2; grid-row: 1; align-self: start; width: 56px; height: 56px; margin: 0; font-size: 18px; }
.pg-layer.ly-editorial .mini__head > .mini__name { grid-column: 1; grid-row: 1; font-size: 40px; line-height: 0.95; letter-spacing: -0.03em; text-align: left; overflow-wrap: anywhere; }
.pg-layer.ly-editorial .mini__head > :not(.mini__avatar, .studio__av, .mini__name, .mini__banner) { grid-column: 1 / -1; justify-self: start; margin-left: 0; margin-right: 0; text-align: left; }
.pg-layer.ly-editorial .mini__socials { justify-content: flex-start; }
.pg-layer.ly-editorial :not(.bsx) > .mini__link { padding-left: 16px; text-align: left; }

/* ---- Grid (Business): button blocks as tiles, two in a row; cards keep the full width ---- */
/* the editor's preview draws each block's wrapper as `display: contents` (app.css); here it's the grid item, as on the page */
.pg-layer:is(.ly-grid, .ly-list) .mini__links > .blk-hook { display: block; }
.pg-layer:is(.ly-grid, .ly-list) .mini__links > .blk-hook[hidden] { display: none; }
.pg-layer.ly-grid .mini__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pg-layer.ly-grid .mini__links > * { grid-column: 1 / -1; }
.pg-layer.ly-grid .mini__links > .blk-hook:has(> .mini__link) { grid-column: auto; }
.pg-layer.ly-grid .mini__links > .blk-hook > .mini__link { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 72px; padding: 12px; }
/* a pill theme's round buttons would turn tall tiles into ovals: tiles stay softly rounded */
.pg-layer.ly-grid .mini__links > .blk-hook:not(.bsx) > .mini__link { border-radius: min(var(--rad, 14px), 20px); }