/* =====================================================================
   Atlas of Home: in-article app cards that SHOW the app (2026-09-30)
   Globe (the family map), voice player, then-and-now slider.
   Same look as the homepage showcases; built by inc/aoh-blog-cta.php.
   Every grid track is minmax(0,1fr) so nothing forces a 375px page wider.
   ===================================================================== */

.aoh-bc {
    --bc-night: #0F1D25; --bc-night-2: #0B161D; --bc-moon: #E4DFD6;
    --bc-gold: #D4A96A; --bc-gold-hi: #E8C58F; --bc-teal: #35C4BA;
    --bc-serif: 'Playfair Display', Georgia, serif;
    position: relative;
    margin: 3.5rem 0;
    padding: 2.2rem 2.2rem 2.3rem;
    border: 1px solid rgba(212, 169, 106, .45);
    border-radius: 22px;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(212,169,106,.12), rgba(212,169,106,0) 50%),
        linear-gradient(165deg, #172A34 0%, var(--bc-night) 55%, var(--bc-night-2) 100%);
    color: var(--bc-moon);
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
}
.aoh-post-body .aoh-bc p { margin: 0; }
.aoh-bc__kick {
    display: block;
    font: 600 .72rem/1.3 'Libre Franklin', system-ui, sans-serif;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--bc-gold); margin-bottom: .8rem;
}
.aoh-post-body .aoh-bc .aoh-bc__title {
    font: 600 clamp(1.45rem, 4.6vw, 1.9rem)/1.18 var(--bc-serif);
    color: #F4EFE6; margin: 0 0 .8rem; max-width: 22ch; text-wrap: balance;
}
.aoh-post-body .aoh-bc .aoh-bc__body {
    color: rgba(228,223,214,.78); font-size: 1.02rem; line-height: 1.65; max-width: 56ch;
}
.aoh-post-body .aoh-bc .aoh-bc__note {
    margin-top: .9rem; font-size: .84rem; line-height: 1.5; color: rgba(228,223,214,.55);
}
.aoh-bc .aoh-cta-btn { margin-top: 1.5rem; }

/* GeneratePress styles every <button>; reset ours. */
.aoh-bc button {
    font-family: 'Libre Franklin', system-ui, sans-serif; line-height: 1.2;
    text-transform: none; letter-spacing: 0;
}

/* ------------------------------------------------ 1. the family map */
.aoh-bc--map {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background:
        radial-gradient(70% 60% at 50% 55%, #1B3847 0%, rgba(15,29,37,0) 70%),
        linear-gradient(170deg, #142732 0%, var(--bc-night) 50%, var(--bc-night-2) 100%);
    border-color: rgba(232,197,143,.6);
    box-shadow: 0 0 0 1px rgba(232,197,143,.08), 0 0 60px -10px rgba(212,169,106,.28), 0 30px 70px -30px rgba(0,0,0,.8);
}
.aoh-bc--map::before {           /* a little starlight behind the globe */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background-image:
        radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 78% 12%, #E8C58F 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 88% 44%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 62%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 64% 86%, #E8C58F 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 30% 92%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 94% 78%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 44% 6%, #fff 50%, transparent 51%);
}
.aoh-bc__globe {
    position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 1.2rem auto .2rem;
    cursor: grab; touch-action: pan-y;
}
.aoh-bc__globe::before {
    content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle at 35% 30%, rgba(53,196,186,.14), rgba(15,29,37,0) 60%);
    box-shadow: 0 0 80px rgba(212,169,106,.16), inset 0 0 60px rgba(0,0,0,.5);
}
.aoh-bc__globe canvas { display: block; width: 100%; height: 100%; }
.aoh-post-body .aoh-bc .aoh-bc__replay {
    position: absolute; right: 2%; bottom: 3%;
    padding: .45rem .85rem; border-radius: 999px; cursor: pointer;
    font-size: .78rem; font-weight: 600;
    background: rgba(15,29,37,.75); color: var(--bc-gold-hi);
    border: 1px solid rgba(212,169,106,.5);
    opacity: 0; transition: opacity .4s; pointer-events: none;
}
.aoh-bc__globe.is-done .aoh-bc__replay { opacity: 1; pointer-events: auto; }
.aoh-post-body .aoh-bc .aoh-bc__legs {
    list-style: none; margin: .4rem 0 0; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
}
.aoh-post-body .aoh-bc .aoh-bc__legs li {
    display: flex; align-items: center; gap: .75rem; margin: 0;
    padding: .6rem .9rem; border-radius: 12px; border: 1px solid transparent;
    font-size: .98rem; line-height: 1.35; color: rgba(228,223,214,.42);
    transition: color .5s, background .5s, border-color .5s;
    overflow-wrap: anywhere;
}
.aoh-bc__legs li::before { content: none !important; }
.aoh-bc__legs li i {
    flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(53,196,186,.3); transition: background .5s, box-shadow .5s;
}
.aoh-post-body .aoh-bc .aoh-bc__legs li.is-on {
    color: var(--bc-moon); background: rgba(212,169,106,.08); border-color: rgba(212,169,106,.25);
}
.aoh-bc__legs li.is-on i { background: var(--bc-teal); box-shadow: 0 0 10px rgba(53,196,186,.7); }
.aoh-bc__legs li[data-leg="2"].is-on i { background: var(--bc-gold-hi); box-shadow: 0 0 10px rgba(232,197,143,.8); }
.aoh-post-body .aoh-bc .aoh-bc__km { margin-top: .9rem; font-size: .88rem; color: rgba(228,223,214,.6); }
.aoh-bc__km b {
    font: 600 1.6rem var(--bc-serif); color: var(--bc-gold-hi);
    font-variant-numeric: tabular-nums; margin-right: .2rem;
}

@media (min-width: 700px) {
    .aoh-bc--map {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "copy globe" "legs globe" "km globe" "btn globe";
        column-gap: 1.6rem; align-items: start;
    }
    .aoh-bc--map .aoh-bc__copy  { grid-area: copy; }
    .aoh-bc--map .aoh-bc__globe { grid-area: globe; align-self: center; margin: 0; }
    .aoh-bc--map .aoh-bc__legs  { grid-area: legs; }
    .aoh-bc--map .aoh-bc__km    { grid-area: km; }
    .aoh-bc--map .aoh-cta-btn   { grid-area: btn; justify-self: start; }
}

/* ------------------------------------------------ 2. voices */
.aoh-bc__player {
    margin-top: 1.4rem; padding: 1.2rem 1.1rem 1.3rem; border-radius: 20px;
    background: rgba(8,16,21,.55); border: 1px solid rgba(228,223,214,.1);
    position: relative; overflow: hidden;
}
.aoh-bc__player::before {
    content: ""; position: absolute; inset: -40% -20% auto; height: 80%; z-index: -1;
    background: radial-gradient(closest-side, rgba(212,169,106,.18), transparent);
}
.aoh-bc__phead { display: flex; gap: .85rem; align-items: center; min-width: 0; }
.aoh-post-body .aoh-bc .aoh-bc__phead img {
    width: 54px; height: 54px; flex: 0 0 auto; margin: 0;
    border-radius: 50%; border: 2px solid var(--bc-gold); object-fit: cover;
}
.aoh-post-body .aoh-bc .aoh-bc__pt { font: 600 1.15rem/1.2 var(--bc-serif); color: #F4EFE6; }
.aoh-post-body .aoh-bc .aoh-bc__pm { font-size: .8rem; line-height: 1.4; color: rgba(228,223,214,.6); margin-top: 3px; }
.aoh-bc__wave { display: flex; align-items: center; gap: 2px; height: 56px; margin: 1.1rem 0 .8rem; cursor: pointer; }
.aoh-bc__wave i {
    flex: 1; min-width: 0; border-radius: 3px; height: var(--h, 20%);
    background: rgba(228,223,214,.22); transition: background .2s, transform .15s;
}
.aoh-bc__wave i.is-past { background: var(--bc-gold); }
.aoh-bc__player.is-playing .aoh-bc__wave i.is-now { transform: scaleY(1.35); background: var(--bc-gold-hi); }
.aoh-bc__prow { display: flex; align-items: center; gap: .85rem; }
.aoh-post-body .aoh-bc .aoh-bc__play {
    width: 54px; height: 54px; padding: 0; flex: 0 0 auto; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--bc-gold); color: var(--bc-night);
    box-shadow: 0 0 0 0 rgba(212,169,106,.5); animation: aohBcPulse 2.4s ease-out infinite;
}
.aoh-bc__player.is-playing .aoh-bc__play { animation: none; }
.aoh-bc__play .i-pause { display: none; }
.aoh-bc__player.is-playing .i-pause { display: block; }
.aoh-bc__player.is-playing .i-play { display: none; }
.aoh-bc__bar { flex: 1; min-width: 0; height: 4px; border-radius: 3px; background: rgba(228,223,214,.15); overflow: hidden; }
.aoh-bc__bar i { display: block; height: 100%; width: 0; background: var(--bc-gold); }
.aoh-bc__time { font-size: .8rem; font-variant-numeric: tabular-nums; color: rgba(228,223,214,.7); white-space: nowrap; }
.aoh-post-body .aoh-bc .aoh-bc__words {
    margin-top: 1rem; font: italic 500 1.08rem/1.55 var(--bc-serif); color: rgba(228,223,214,.95);
}
.aoh-bc__player.is-live .aoh-bc__words .wd { color: rgba(228,223,214,.3); transition: color .2s; }
.aoh-bc__player.is-live .aoh-bc__words .wd.is-said { color: var(--bc-moon); }
.aoh-bc__player.is-live .aoh-bc__words .wd.is-now { color: var(--bc-gold-hi); text-shadow: 0 0 18px rgba(232,197,143,.6); }
@keyframes aohBcPulse {
    70%  { box-shadow: 0 0 0 16px rgba(212,169,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,169,106,0); }
}

/* ------------------------------------------------ 3. then and now */
.aoh-bc__slider {
    position: relative; aspect-ratio: 1; margin-top: 1.4rem; border-radius: 18px; overflow: hidden;
    user-select: none; -webkit-user-select: none; touch-action: pan-y; background: #1a2a33;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.aoh-bc__now, .aoh-bc__then { position: absolute; inset: 0; }
.aoh-bc__then { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.aoh-post-body .aoh-bc .aoh-bc__slider img {
    display: block; width: 100%; height: 100%; max-width: none; margin: 0;
    object-fit: cover; border-radius: 0; transition: opacity .5s;
}
.aoh-bc__slider.is-swapping img { opacity: 0; }
.aoh-bc__then img { filter: sepia(.2); }
.aoh-bc__tag {
    position: absolute; left: 12px; bottom: 12px; padding: 3px 11px; border-radius: 10px;
    font: 600 1.05rem var(--bc-serif); background: rgba(15,29,37,.72); color: var(--bc-moon);
}
.aoh-bc__tag--r { left: auto; right: 12px; }
.aoh-bc__handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
    background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.4); pointer-events: none;
}
.aoh-bc__handle span {
    position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.aoh-bc__handle span::before, .aoh-bc__handle span::after {
    content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -7px;
    border: 7px solid transparent;
}
.aoh-bc__handle span::before { left: 5px; border-right-color: #1B2F3A; }
.aoh-bc__handle span::after  { right: 5px; border-left-color: #1B2F3A; }
.aoh-post-body .aoh-bc .aoh-bc__range {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
    opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; border: 0; background: none;
}
.aoh-bc__pairs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.aoh-post-body .aoh-bc .aoh-bc__pairs button {
    padding: .55rem .9rem; border-radius: 999px; cursor: pointer;
    font-size: .84rem; font-weight: 600;
    border: 1px solid rgba(228,223,214,.22); background: rgba(228,223,214,.06); color: var(--bc-moon);
    transition: background .25s, border-color .25s, color .25s;
}
.aoh-post-body .aoh-bc .aoh-bc__pairs button[aria-pressed="true"] {
    background: #0D6A66; border-color: #0D6A66; color: #fff;
}
.aoh-post-body .aoh-bc button:focus-visible,
.aoh-post-body .aoh-bc .aoh-bc__range:focus-visible + * { outline: 2px solid var(--bc-gold-hi); outline-offset: 2px; }

@media (min-width: 700px) {
    .aoh-bc--then .aoh-bc__slider { aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
    .aoh-bc { padding: 1.7rem 1.25rem 1.9rem; border-radius: 16px; margin: 3rem 0; }
    .aoh-bc .aoh-cta-btn { width: 100%; justify-content: center; }
    .aoh-bc__player { padding: 1rem .9rem 1.1rem; }
    .aoh-post-body .aoh-bc .aoh-bc__words { font-size: 1rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
    .aoh-post-body .aoh-bc .aoh-bc__play { animation: none; }
}