/* M4 pages - Motoyoshi Yotomo. Reviews, About and Team only. */
.page-intro { max-width: 720px; }
.page-intro h1 { font-size: clamp(2.4rem, 8vw, 4.8rem); }
.muted-copy, .review-date, .team-note { color: var(--muted); }

.review-layout { display: grid; gap: var(--space-5); }
.review-summary { margin-bottom: var(--space-3); }
.review-average { font-family: var(--font-display); font-size: 3rem; font-weight: 400; }
.review-list { display: grid; gap: var(--space-3); }
.review-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.review-card-head h3 { margin-bottom: 0; }
.review-stars { color: var(--accent-text); letter-spacing: .08em; }
.review-date { margin-bottom: 0; font-size: .78rem; text-transform: uppercase; }
.review-form { align-self: start; }
.review-form > fieldset, .rating-field { margin: 0; padding: 0; border: 0; }
.review-form > fieldset > legend { margin-bottom: var(--space-4); font-family: var(--font-display); font-size: 1.5rem; }
.form-field, .rating-field { margin-bottom: var(--space-4); }
.rating-field > legend { margin-bottom: var(--space-1); font-weight: 700; }
.star-options { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-options input { position: absolute; opacity: 0; }
.star-options label { margin: 0; padding: 0 var(--space-1); color: var(--track); font-size: 2rem; cursor: pointer; }
.star-options label:hover, .star-options label:hover ~ label,
.star-options input:checked ~ label { color: var(--accent-text); }
.star-options input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.counter-row { display: flex; justify-content: space-between; gap: var(--space-2); }
.character-count { color: var(--muted); font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; }
.near-limit { color: var(--accent-text); font-weight: 700; }
.form-status { min-height: 1.65em; margin-top: var(--space-3); color: var(--accent-text); }

.about-grid, .info-card-grid, .objective-grid { display: grid; gap: var(--space-4); }
/* full-bleed: pulls the banner edge-to-edge past the .wrap */
.about-banner {
    width: 100vw;
    height: 340px;
    margin: 0 0 var(--space-4);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}
.about-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.process-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.process-list li { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.process-number { color: var(--accent-text); font-family: var(--font-mono); }

.team-grid { display: grid; gap: var(--space-4); }
.team-card { display: grid; gap: var(--space-4); }
.member-photo { display: grid; place-items: center; min-height: 240px; background: var(--track); color: var(--accent-text); font-family: var(--font-display); font-size: 4rem; border-radius: calc(var(--radius) - 2px); }
.member-photo img { width: 100%; height: 100%; min-height: 240px; max-height: 360px; object-fit: cover; border-radius: inherit; }
.contribution-list { margin: var(--space-3) 0 var(--space-4); padding-left: var(--space-4); }
.table-scroll { overflow-x: auto; margin-top: var(--space-4); }
.contribution-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.contribution-table th, .contribution-table td { padding: var(--space-3); text-align: left; vertical-align: top; border: 1px solid var(--hairline); }
.contribution-table thead { background: var(--surface); }
.team-note { margin-top: var(--space-3); }

@media (min-width: 700px) {
    .review-layout { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
    .about-grid { grid-template-columns: .8fr 1.2fr; }
    .info-card-grid, .objective-grid { grid-template-columns: repeat(2, 1fr); }
    .team-card { grid-template-columns: minmax(220px, .75fr) 1.25fr; }
}

@media (prefers-reduced-motion: reduce) {
    .review-card, .team-card { transition: none; }
}

/* Motion. fadeInUp is shared from components.css; banner-settle is
   M4's own. Entrances use backwards fill so a finished animation
   never pins transform and blocks the hover lifts. */
@keyframes banner-settle {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}
.page-intro { animation: fadeInUp .5s ease-out backwards; }
.about-banner img { animation: banner-settle .6s ease-out backwards; }
.about-grid > div { animation: fadeInUp .5s ease-out backwards; }
.about-grid > div:nth-child(2) { animation-delay: .06s; }
.info-card-grid .card,
.objective-grid .card { animation: fadeInUp .5s ease-out backwards; }
.info-card-grid .card:nth-child(1) { animation-delay: .06s; }
.info-card-grid .card:nth-child(2) { animation-delay: .12s; }
.info-card-grid .card:nth-child(3) { animation-delay: .18s; }
.info-card-grid .card:nth-child(4) { animation-delay: .24s; }
.objective-grid .card:nth-child(1) { animation-delay: .06s; }
.objective-grid .card:nth-child(2) { animation-delay: .12s; }
.objective-grid .card:nth-child(3) { animation-delay: .18s; }
.objective-grid .card:nth-child(4) { animation-delay: .24s; }
.process-list li {
    animation: fadeInUp .5s ease-out backwards;
    transition: transform .25s ease;
}
.process-list li:nth-child(1) { animation-delay: .06s; }
.process-list li:nth-child(2) { animation-delay: .12s; }
.process-list li:nth-child(3) { animation-delay: .18s; }
.process-list li:nth-child(4) { animation-delay: .24s; }
.process-number { transition: color var(--transition); }
.team-card {
    animation: fadeInUp .5s ease-out backwards;
    transition: transform .25s ease, box-shadow .25s ease;
}
.team-card:nth-child(1) { animation-delay: .06s; }
.team-card:nth-child(2) { animation-delay: .12s; }
.team-card:nth-child(3) { animation-delay: .18s; }
.team-card:nth-child(4) { animation-delay: .24s; }
/* img already clips itself: it inherits the container's radius, and a
   scaled border-radius scales with the box, so the 1.02 zoom stays
   rounded without an overflow:hidden double-clip */
.member-photo img { transition: transform .4s ease; }
.contribution-table tbody tr { transition: background-color .2s ease; }
.team-note { animation: fadeInUp .5s ease-out backwards; animation-delay: .3s; }

/* reviews: the static nodes get entrances; cards stay clean because
   renderReviews() rebuilds them on every submit */
.star-options label { transition: color var(--transition); }
.review-summary { animation: fadeInUp .3s ease both; }
.review-form { animation: fadeInUp .3s ease .06s both; }
.review-list { animation: fadeInUp .3s ease .12s both; }
.form-status:not(:empty) { animation: fadeInUp .25s ease both; }
.character-count { transition: color var(--transition); }

@media (hover: hover) {
    .process-list li:hover { transform: translateX(3px); }
    .process-list li:hover .process-number { color: var(--accent); }
    .team-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    }
    .team-card:hover .member-photo img,
    .team-card:focus-within .member-photo img { transform: scale(1.02); }
    .contribution-table tbody tr:hover { background-color: var(--surface); }
}

/* Press feedback for touch: same effects on :active, outside the
   (hover: hover) guard (touch devices fail that query). */
.process-list li:active { transform: translateX(3px); }
.process-list li:active .process-number { color: var(--accent); }
.team-card:active {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.team-card:active .member-photo img { transform: scale(1.02); }
.contribution-table tbody tr:active { background-color: var(--surface); }