/*
 * Public artist page styles. Self-contained, do not pull in app.min.css so the
 * page stays light and brand-aligned with ngage.band. All colours are exposed
 * as CSS custom properties so a future "palette switcher" can override them
 * without touching markup.
 */

:root {
    --ap-primary:    #fe640a;
    --ap-secondary:  #febf20;
    --ap-accent:     #84b12e;
    --ap-heading:    #2c2f33;
    --ap-text:       #4a4a4a;
    --ap-muted:      #8a8d92;
    --ap-bg:         #fafafa;
    --ap-surface:    #ffffff;
    --ap-surface-2:  #f4f5f7;
    --ap-border:     #e8eaee;
    --ap-shadow:     0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.05);
    --ap-radius:     14px;
    --ap-radius-sm:  10px;
    --ap-maxw:       1080px;
    --ap-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body.ap-body {
    background: var(--ap-bg);
    color: var(--ap-text);
    font-family: var(--ap-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--ap-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
    color: var(--ap-heading);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

/* ---------- Top bar & footer ---------- */

.ap-topbar {
    background: var(--ap-surface);
    border-bottom: 1px solid var(--ap-border);
}
.ap-topbar__inner {
    max-width: var(--ap-maxw);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ap-topbar__brand {
    color: var(--ap-heading);
    font-weight: 700;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ap-topbar__brand img {
    max-height: 32px;
    width: auto;
    display: block;
}
.ap-topbar__brand:hover { text-decoration: none; }
.ap-powered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ap-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.15s ease;
}
.ap-powered:hover { color: var(--ap-primary); text-decoration: none; }
.ap-powered__label { color: inherit; }
.ap-powered__icon { width: 25px; height: 25px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.ap-powered__brand { color: var(--ap-heading); font-weight: 600; }
.ap-powered:hover .ap-powered__brand { color: var(--ap-primary); }

.ap-footer {
    margin-top: auto;
    border-top: 1px solid var(--ap-border);
    background: var(--ap-surface);
}
.ap-footer__inner {
    max-width: var(--ap-maxw);
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ap-muted);
    font-size: 13px;
    gap: 16px;
}
@media (max-width: 640px) {
    .ap-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ---------- Page layout ---------- */

.ap-page { flex: 1; }

.ap-container {
    max-width: var(--ap-maxw);
    margin: 0 auto;
    padding: 32px 24px 56px;
}

.ap-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.ap-grid__main { display: flex; flex-direction: column; gap: 22px; }
.ap-grid__side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 24px; }

.ap-sidebar-logo__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
}
.ap-sidebar-logo__img {
    display: block;
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
}
.ap-body[data-ap-theme="light"] .ap-sidebar-logo__img--dark { display: none; }
.ap-body[data-ap-theme="dark"] .ap-sidebar-logo__img--light { display: none; }
.ap-body[data-ap-theme="light"] .ap-sidebar-logo__stage:not(:has(.ap-sidebar-logo__img--light)) .ap-sidebar-logo__img--dark { display: block; }
.ap-body[data-ap-theme="dark"] .ap-sidebar-logo__stage:not(:has(.ap-sidebar-logo__img--dark)) .ap-sidebar-logo__img--light { display: block; }

@media (max-width: 820px) {
    .ap-grid { grid-template-columns: 1fr; }
    .ap-grid__side { position: static; }
}

.ap-footnotes { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }

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

.ap-hero {
    position: relative;
    min-height: 500px;
    height: 80vh;
    color: #fff;
    overflow: hidden;
}
.ap-hero__bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-color: var(--ap-heading);
}
.ap-hero__bg--placeholder {
    background: linear-gradient(135deg, var(--ap-heading) 0%, #4a4d52 100%);
}
.ap-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,20,20,0.15) 0%, rgba(20,20,20,0.55) 65%, rgba(20,20,20,0.75) 100%);
}
.ap-hero__inner {
    position: absolute;
    inset: 0;
}
.ap-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    max-width: var(--ap-maxw);
    margin: 0 auto;
    width: 100%;
    padding: 0 24px 56px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ap-hero__title {
    color: #fff;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.ap-hero__meta {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    margin: 0;
}
.ap-hero__sep { margin: 0 8px; opacity: 0.5; }
.ap-hero__ctas {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- Buttons ---------- */

.ap-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.ap-btn:hover { text-decoration: none; }
.ap-btn:active { transform: translateY(1px); }
.ap-btn--primary {
    background: var(--ap-primary);
    color: #fff;
}
.ap-btn--primary:hover { background: #e95800; color: #fff; }
.ap-btn--secondary {
    background: #fff;
    color: var(--ap-heading);
    border-color: rgba(255, 255, 255, 0.85);
}
.ap-btn--secondary:hover { background: rgba(255,255,255,0.9); }
.ap-btn--ghost {
    background: transparent;
    color: var(--ap-heading);
    border-color: var(--ap-border);
}
.ap-btn--ghost:hover { background: var(--ap-surface-2); }
.ap-btn--sm { padding: 6px 12px; font-size: 13px; }

/* ---------- Card ---------- */

.ap-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    padding: 22px 24px;
    color: var(--ap-text);
}
a.ap-card { display: block; }
a.ap-card:hover { text-decoration: none; border-color: var(--ap-primary); }

.ap-card__title {
    font-size: 18px;
    margin: 0 0 14px;
    color: var(--ap-heading);
}

.ap-section-title {
    font-size: 22px;
    margin: 0 0 16px;
    color: var(--ap-heading);
}

/* ---------- About ---------- */

.ap-about__lead {
    font-size: 18px;
    color: var(--ap-heading);
    margin: 0 0 12px;
    line-height: 1.5;
}
.ap-about__long {
    color: var(--ap-text);
    line-height: 1.7;
}

/* ---------- Band members ---------- */

.ap-members__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 22px 18px;
}
.ap-member {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ap-member__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ap-surface-2);
    border: 2px solid var(--ap-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ap-member__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ap-member__avatar--placeholder {
    background: linear-gradient(135deg, var(--ap-primary) 0%, #ff8a3d 100%);
    color: #ffffff;
    border-color: transparent;
}
.ap-member__avatar--placeholder span {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}
.ap-member__name {
    color: var(--ap-heading);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}
.ap-member__instruments {
    color: var(--ap-muted);
    font-size: 13px;
    line-height: 1.4;
}

/* ---------- Contact ---------- */

.ap-contact__list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 18px;
    margin: 0;
}
.ap-contact__list dt {
    color: var(--ap-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: start;
    padding-top: 2px;
}
.ap-contact__list dd { margin: 0; color: var(--ap-text); }
.ap-contact__list a { color: var(--ap-primary); word-break: break-word; }

@media (max-width: 640px) {
    .ap-contact__list {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
    .ap-contact__list dt + dd {
        margin-bottom: 12px;
    }
    .ap-contact__list dt + dd:last-child,
    .ap-contact__list dt:last-of-type + dd {
        margin-bottom: 0;
    }
}

/* ---------- Socials ---------- */

.ap-socials__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ap-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    background: var(--ap-surface-2);
    color: var(--ap-heading);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--ap-border);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ap-social__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
    display: block;
}
.ap-social:hover {
    background: var(--ap-primary);
    color: #fff;
    border-color: var(--ap-primary);
    text-decoration: none;
}
/* Brand colour on hover for the well-known platforms. */
.ap-social--spotify:hover    { background: #1db954; border-color: #1db954; }
.ap-social--youtube:hover    { background: #ff0000; border-color: #ff0000; }
.ap-social--instagram:hover  { background: #e4405f; border-color: #e4405f; }
.ap-social--facebook:hover   { background: #1877f2; border-color: #1877f2; }
.ap-social--bandcamp:hover   { background: #629aa9; border-color: #629aa9; }
.ap-social--soundcloud:hover { background: #ff5500; border-color: #ff5500; }
.ap-social--tiktok:hover     { background: #010101; border-color: #010101; }

/* ---------- Link card ---------- */

.ap-link-card {
    position: relative;
    padding-right: 48px;
}
.ap-link-card__sub {
    color: var(--ap-muted);
    font-size: 14px;
    margin: 0;
}
.ap-link-card__arrow {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ap-primary);
    font-size: 22px;
    line-height: 1;
}

/* ---------- Press page ---------- */

.ap-press__header { margin-bottom: 28px; }
.ap-back {
    color: var(--ap-muted);
    font-size: 14px;
    display: inline-block;
    margin-bottom: 12px;
}
.ap-press__title {
    font-size: clamp(28px, 4vw, 40px);
    color: var(--ap-heading);
    margin: 0;
}
.ap-press__sub { color: var(--ap-muted); margin: 4px 0 0; }

.ap-press__photos { margin-bottom: 32px; }
.ap-press__photos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 820px) { .ap-press__photos-grid { grid-template-columns: 1fr; } }
.ap-press__photo {
    margin: 0;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    overflow: hidden;
    box-shadow: var(--ap-shadow);
    display: flex;
    flex-direction: column;
}
.ap-press__photo img {
    width: 100%;
    height: auto;
    display: block;
    background: var(--ap-surface-2);
}
.ap-press__photo figcaption {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--ap-muted);
}

.ap-press__logos { margin-bottom: 32px; }
.ap-press__logos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 520px) { .ap-press__logos-grid { grid-template-columns: 1fr; } }
.ap-press__logo {
    margin: 0;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    overflow: hidden;
    box-shadow: var(--ap-shadow);
    display: flex;
    flex-direction: column;
}
.ap-press__logo-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
}
.ap-press__logo--light .ap-press__logo-stage { background: #ffffff; }
.ap-press__logo--dark .ap-press__logo-stage  { background: #2c2f33; }
.ap-press__logo-stage img {
    max-width: 70%;
    max-height: 140px;
    height: auto;
    display: block;
}
.ap-press__logo figcaption {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--ap-muted);
}

.ap-press__bios {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}
.ap-press__bio {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 22px 24px;
    box-shadow: var(--ap-shadow);
}
.ap-press__bio header h3 {
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--ap-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Demo material (Divi-style audio player) ---------- */

.ap-demos {
    background: var(--ap-surface);
    color: var(--ap-text);
    border-color: var(--ap-border);
}
.ap-demos .ap-card__title { color: var(--ap-heading); }
.ap-demos__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ap-demo {
    position: relative;
    background: var(--ap-demo-accent, var(--ap-primary));
    color: #ffffff;
    border-radius: var(--ap-radius-sm);
    overflow: hidden;
}
.ap-demo__inner {
    padding: 28px 22px 22px;
    text-align: center;
}
.ap-demo__head { margin-bottom: 22px; }
.ap-demo__title {
    font-size: clamp(20px, 3vw, 26px);
    color: #ffffff;
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
}
.ap-demo__meta {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    margin: 6px 0 0;
}
.ap-demo__meta strong { color: #ffffff; font-weight: 600; }
.ap-demo__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.ap-demo__play {
    border: 0;
    background: transparent;
    padding: 0;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    color: #ffffff;
}
.ap-demo__play-glyph {
    position: absolute;
    inset: 0;
    margin: auto;
}
.ap-demo__play-glyph--play {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #ffffff;
    background: transparent;
}
.ap-demo__play-glyph--pause {
    display: none;
    width: 14px;
    height: 16px;
    background:
        linear-gradient(#fff, #fff) left center / 4px 16px no-repeat,
        linear-gradient(#fff, #fff) right center / 4px 16px no-repeat;
}
.ap-demo.is-playing .ap-demo__play-glyph--play { display: none; }
.ap-demo.is-playing .ap-demo__play-glyph--pause { display: block; }
.ap-demo__progress-wrap {
    flex: 1 1 160px;
    min-width: 120px;
    max-width: 420px;
}
.ap-demo__seek,
.ap-demo__volume {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    margin: 0;
}
.ap-demo__seek::-webkit-slider-thumb,
.ap-demo__volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ap-demo__seek::-moz-range-thumb,
.ap-demo__volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 0;
}
.ap-demo__seek::-moz-range-track,
.ap-demo__volume::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}
.ap-demo__volume {
    flex: 0 1 72px;
    min-width: 56px;
    max-width: 88px;
}
.ap-demo__time {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    min-width: 42px;
    text-align: right;
    flex-shrink: 0;
}
.ap-demo__mute {
    border: 0;
    background: transparent;
    padding: 0;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    color: #ffffff;
    opacity: 0.95;
}
.ap-demo__vol-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}
.ap-demo.is-muted .ap-demo__vol-icon { opacity: 0.55; }
.ap-demo__audio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 520px) {
    .ap-demo__controls { gap: 8px; }
    .ap-demo__volume { display: none; }
    .ap-demo__mute { display: none; }
}

/* ---------- Upcoming gigs ---------- */

.ap-gigs__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ap-gig {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--ap-border);
}
.ap-gig:first-child { border-top: 0; padding-top: 4px; }
.ap-gig__date {
    text-align: center;
    background: var(--ap-surface-2);
    border-radius: 10px;
    padding: 8px 6px;
    line-height: 1.1;
    color: var(--ap-heading);
}
.ap-gig__day { display: block; font-size: 22px; font-weight: 800; }
.ap-gig__month { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ap-primary); font-weight: 700; }
.ap-gig__year { display: block; font-size: 11px; color: var(--ap-muted); }
.ap-gig__body { min-width: 0; }
.ap-gig__title { font-weight: 600; color: var(--ap-heading); }
.ap-gig__location { color: var(--ap-muted); font-size: 14px; margin-top: 2px; }
.ap-gig__cta { display: flex; align-items: center; }
.ap-gig__soldout {
    background: var(--ap-surface-2);
    color: var(--ap-muted);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ap-gigs__more {
    display: inline-block;
    margin-top: 14px;
    color: var(--ap-primary);
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 480px) {
    .ap-gig { grid-template-columns: 60px 1fr; }
    .ap-gig__cta { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------- nGage.band marketing footer (static, brand-aligned) ---------- */
/*
 * Hand-crafted footer that mirrors the layout/colors of the ngage.band marketing
 * footer (dark surface, orange section titles, white links). The link rows under
 * "Modules" and "Sitemap" are fetched live from ngage.band by BandsNgageFooter
 * with a 24h cache and a hardcoded fallback when the marketing site is offline.
 */
.ap-mfooter {
    background: #494949;
    color: #d6d8db;
    padding: 56px 24px 24px;
}
.ap-mfooter a { color: #ffffff; text-decoration: none; }
.ap-mfooter a:hover { color: var(--ap-primary); text-decoration: none; }
.ap-mfooter__inner {
    max-width: var(--ap-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px 56px;
}
@media (max-width: 720px) {
    .ap-mfooter__inner { grid-template-columns: 1fr; gap: 32px; }
}
.ap-mfooter__col { min-width: 0; }
.ap-mfooter__logo {
    display: inline-block;
    line-height: 1;
    margin-bottom: 22px;
}
.ap-mfooter__logo img {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
}
.ap-mfooter__logo:hover { text-decoration: none; }
.ap-mfooter__contact {
    margin: 0 0 14px;
    line-height: 1.7;
    font-size: 15px;
    color: #d6d8db;
}
.ap-mfooter__contact a { color: #ffffff; }
.ap-mfooter__contact--muted {
    font-size: 13px;
    color: #a5a8ad;
}
.ap-mfooter__title {
    color: var(--ap-primary);
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin: 4px 0 16px;
}
.ap-mfooter__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ap-mfooter__list li {
    padding: 3px 0;
    font-size: 15px;
}
.ap-mfooter__copy {
    max-width: var(--ap-maxw);
    margin: 36px auto 0;
    padding-top: 18px;
    border-top: 1px solid #5e5e5e;
    color: #a5a8ad;
    font-size: 13px;
    text-align: center;
}