/* ============================================================
 * Hooponopono — Aman Edition
 * Front-end stylesheet. Tokens come from theme.json; this file
 * only adds front-end specifics that block patterns rely on.
 * ============================================================ */

/* ---- BudouX fallback ---------------------------------------- */
/* While the budoux web component loads, render content as the
   raw text (preserves layout, prevents a flash of unstyled). */
budoux-ja:not(:defined) {
    display: contents;
}

/* ---- Global text-flow rules (locked 2026-05-08) ------------- */
p, h1, h2, h3, h4, li {
    overflow-wrap: break-word;
    hanging-punctuation: allow-end;
}

.nowrap {
    white-space: nowrap;
}

/* ---- Aman discipline: no rounded, no shadow, no gradient ---- *
 * theme.json already disables these at the settings level, but
 * we belt-and-braces in case a third-party block reintroduces
 * any of them at the block level. */
*,
*::before,
*::after {
    box-shadow: none !important;
}

/* ---- Image saturation filter (tonal unity) ------------------ */
.r-img,
.v-img,
.ec-img,
.t-photo img,
.inst-photo img,
.kr-photo img {
    filter: saturate(0.92);
}

/* ---- CTA pattern (.door-cta, .inline-cta, etc.) ------------- *
 * Pattern locked in design-decisions.md 2026-05-08. Hover
 * spreads the letter-spacing so the line under the link feels
 * like an exhale. */
.door-cta,
.ec-cta,
.inline-cta,
.kr-deeper-cta,
.brief-cta {
    display: inline-block;
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-size: 15px;
    font-weight: 300;
    color: var(--wp--preset--color--navy);
    letter-spacing: 0.14em;
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--navy);
    padding-bottom: 5px;
    transition: letter-spacing 0.4s ease;
}

.door-cta:hover,
.ec-cta:hover,
.inline-cta:hover,
.kr-deeper-cta:hover,
.brief-cta:hover {
    letter-spacing: 0.22em;
}

/* CTA wrappers that should center their child link */
.event-card,
.notice-more,
.readings-more,
.videos-more,
.tev-more,
.door-cta-wrap,
.detail-link,
.next-card,
.kr-message-pointer,
.kr-personal-cta-inner,
.service-back {
    text-align: center;
}

/* ---- Section alternating bands (locked 2026-05-08) ---------- */
/* Implemented at the block level via white/beige background
   color presets. This file leaves the rule documented but does
   not enforce it — the editor / patterns enforce it. */

/* ============================================================
 * Theme.json overrides (CC13 / 2026-05-15 / QA gate Day 2 #9)
 * Block theme h2 defaults letter-spacing to 0.22em globally,
 * but preview .sec-title needs roomier tracking + smaller size
 * to read as a contemplative section eyebrow.
 * ============================================================ */
.sec-title,
h2.sec-title {
    letter-spacing: 0.4em;
    line-height: 1.8;
    font-weight: 300;
}

/* ============================================================
 * Reading / video card image fallback (QA Day 2 #3)
 * When a post has no featured image, the .r-thumb / .v-thumb
 * container collapses. Show a beige-deep block at the 16:9
 * ratio so the card still has its visual weight.
 * ============================================================ */
.r-thumb,
.v-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--wp--preset--color--beige-deep, #c6d6e4);
    overflow: hidden;
}
.r-thumb img,
.v-thumb img,
.r-thumb .wp-block-post-featured-image,
.v-thumb .wp-block-post-featured-image,
.r-thumb .wp-block-post-featured-image img,
.v-thumb .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    filter: saturate(0.92);
}

/* ============================================================
 * Video play-button overlay (QA Day 2 #4)
 * CSS-only — no template change needed. The same SVG circle +
 * triangle as preview, rendered as a 40px badge centered in
 * the thumbnail.
 * ============================================================ */
.v-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19' fill='none' stroke='%23fafafa' stroke-width='1'/%3E%3Cpath d='M16,13 L28,20 L16,27 Z' fill='%23fafafa'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ============================================================
 * BudouX explicit module loader fallback (QA Day 2 #10)
 * The wp_head hook already injects the module script; this
 * just hides any leftover `<budoux-ja>` tags before the
 * component is defined.
 * ============================================================ */
budoux-ja {
    display: inline;
}

/* ============================================================
 * Block-template grid rules (QA v2 R1, R2, R3)
 *
 * WordPress wp:query → wp:post-template renders as:
 *   <div class="wp-block-query .readings-grid">
 *     <ul class="reading reveal wp-block-post-template">
 *       <li class="wp-block-post post-XXX reading">…</li>
 *
 * The actual grid container is the *inner* <ul>, not the outer
 * <div>. WP also adds `is-layout-flow` which sets display:flow-root.
 * Target the inner post-template directly and override.
 * ============================================================ */
.readings-grid .wp-block-post-template,
.readings-grid > ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.videos-grid .wp-block-post-template,
.videos-grid > ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 720px) {
    .readings-grid .wp-block-post-template,
    .readings-grid > ul.wp-block-post-template {
        grid-template-columns: 1fr 1fr;
        column-gap: 60px;
        row-gap: 70px;
    }
    .videos-grid .wp-block-post-template,
    .videos-grid > ul.wp-block-post-template {
        grid-template-columns: 1fr 1fr;
        column-gap: 60px;
        row-gap: 70px;
    }
}

/* Each card <li> should not show list bullet, no margin. */
.readings-grid .wp-block-post,
.videos-grid .wp-block-post {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Events list (rebuilt 2026-05-25 to match preview/index.html).
 * front-page.html now renders:
 *   <section class="tev-sec">           ← beige band wraps EVERYTHING
 *     <div class="sec-head">…</div>
 *     <div class="wp-block-query tev-list">
 *       <ul class="wp-block-post-template">
 *         <li class="wp-block-post"><div class="tev-row">  ← grid row
 *             <div class="tev-date">…</div><h3 class="tev-t"><a>…</a></h3>
 * So: neutralise the WP list wrappers, then let preview.css .tev-* drive
 * (date = Noto Serif JP, row grid collapses to 1 col on mobile). */
.tev-list .wp-block-post-template,
.tev-list > ul.wp-block-post-template {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}
.tev-list .wp-block-post {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Belt-and-braces: hold the preview grid even if wp-block-group flow layout
 * sets display on the same .tev-row element. */
.tev-list .tev-row {
    display: grid;
    grid-template-columns: 200px 1fr 140px;
    gap: 40px;
    align-items: baseline;
    padding: 32px 0;
    border-top: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
}
.tev-list .wp-block-post:last-child .tev-row {
    border-bottom: 1px solid var(--wp--preset--color--navy-hair, rgba(50, 68, 47, 0.22));
}
@media (max-width: 768px) {
    .tev-list .tev-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 26px 0;
    }
}
/* post-title renders as <h3 class="tev-t"><a>…</a></h3>; inherit the size and
 * colour from preview.css .tev-t and strip the default link styling. */
.tev-t a {
    color: inherit;
    text-decoration: none;
    font: inherit;
    letter-spacing: inherit;
}
.tev-t a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}