/* =========================================================
   Mia Media — additions on top of the shared public.css brand file.
   public.css is the Mia Bazo house stylesheet, copied unchanged from the other public sites so
   the family stays visually identical. Everything Mia Media specific lives here, so public.css
   can be replaced wholesale when the shared one is updated.

   Palette tokens (--mb-*) are defined in public.css; only new components below.
   ========================================================= */

/* ---- Links in the new components ----
   public.css only colours links inside .prose, .footer-list and .callout, so links in anything
   defined below fall back to browser blue. Bring them into the brand. */
.faq-item a,
.note a,
.kv a,
.hero-trust a,
.book-card-body a,
.product-card a:not(.btn),
.step a {
    color: var(--mb-primary-deep);
    text-decoration: none;
    font-weight: 500;
}

.faq-item a:hover,
.note a:hover,
.kv a:hover,
.hero-trust a:hover,
.book-card-body a:hover,
.product-card a:not(.btn):hover,
.step a:hover {
    color: var(--mb-primary);
    text-decoration: underline;
}

/* ---- Store badge logos ----
   .store-row / .store-badge / .store-sub come from public.css; only the inline SVG sizing is
   new. A live badge is an <a> and a not-yet-released one is a <span>, so the hover lift is
   scoped to the anchor. */
.store-badge-logo {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

a.store-badge {
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

a.store-badge:hover {
    border-color: var(--mb-primary);
    transform: translateY(-1px);
}

/* ---- Book cards ----
   Same construction as .game-card in public.css, but book covers are portrait, so the art well
   is 2:3 rather than 16:10 and the grid runs narrower and denser. */
.book-grid {
    display: grid;
    /* 280px is chosen against the 1140px .public-container: it yields three columns, so a set
       of six titles fills two even rows rather than leaving orphans on a second row of four. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
}

.book-card {
    background: var(--mb-surface);
    border: 1px solid var(--mb-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.book-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(51, 51, 51, .12);
    border-color: var(--mb-primary-bright);
}

.book-card-art {
    position: relative;
    aspect-ratio: 2 / 3;
    background: linear-gradient(160deg, #3a2a18, #17100a);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.book-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback when a title has no cover art yet: set the initials as large type on the well. */
.book-card-art-initials {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .28);
}

.book-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(23, 16, 10, .72);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
}

.book-card-body {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.book-card-body h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    color: var(--mb-ink);
}

.book-card-author {
    font-size: 14px;
    color: var(--mb-muted);
    margin: 0 0 12px;
}

.book-card-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--mb-muted);
}

.book-card-meta span {
    background: var(--mb-page);
    border: 1px solid var(--mb-line);
    border-radius: 999px;
    padding: 3px 10px;
}

/* ---- Product card (Mia Audio and anything that follows it) ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.product-card {
    background: var(--mb-surface);
    border: 1px solid var(--mb-line);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.product-card h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 6px;
    color: var(--mb-ink);
}

.product-card-tag {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mb-primary-deep);
    margin-bottom: 12px;
}

.product-card p {
    color: var(--mb-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px;
}

.product-card-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---- Status pill: "In production", "Coming soon" ---- */
.status-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--mb-line-strong);
    color: var(--mb-muted);
    background: var(--mb-page);
}

.status-pill--soon {
    color: var(--mb-primary-deep);
    border-color: var(--mb-primary);
    background: rgba(221, 121, 4, .08);
}

/* ---- Note / boundary callout ----
   Used where the distinction between the app and the audiobooks has to be unmissable. That
   distinction is load-bearing: the app ships with no content and says so to the app stores. */
.note {
    border-left: 3px solid var(--mb-primary);
    background: rgba(221, 121, 4, .06);
    border-radius: 0 10px 10px 0;
    padding: 18px 22px;
    margin: 26px 0;
    color: var(--mb-ink-soft);
    font-size: 15px;
    line-height: 1.65;
}

.note strong { color: var(--mb-ink); }

/* ---- FAQ ---- */
.faq {
    max-width: 780px;
}

.faq-item {
    border-bottom: 1px solid var(--mb-line);
    padding: 22px 0;
}

.faq-item:first-of-type { border-top: 1px solid var(--mb-line); }

.faq-item h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--mb-ink);
}

.faq-item p,
.faq-item ol,
.faq-item ul {
    color: var(--mb-ink-soft);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 10px;
}

.faq-item ol,
.faq-item ul { padding-left: 22px; }

.faq-item li { margin-bottom: 6px; }

.faq-item :last-child { margin-bottom: 0; }

/* ---- Steps, for the "how it is made" sequence ---- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    counter-reset: step;
}

.step {
    background: var(--mb-surface);
    border: 1px solid var(--mb-line);
    border-radius: 14px;
    padding: 24px;
}

.step::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--mb-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
}

.step h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--mb-ink);
}

.step p {
    color: var(--mb-muted);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

/* ---- Contact / definition rows ---- */
.kv {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 12px 24px;
    max-width: 720px;
    font-size: 15px;
}

.kv dt {
    font-weight: 600;
    color: var(--mb-ink);
}

.kv dd {
    margin: 0;
    color: var(--mb-ink-soft);
}

@media (max-width: 620px) {
    .kv { grid-template-columns: 1fr; gap: 4px 0; }
    .kv dd { margin-bottom: 14px; }
}