/* Ngo Hoang Nguyen theme — CV page-template panels (R2, Core 1.0.0-beta.7.1.27).
 *
 * The Mulan sub-page panel grammar for the About / Resume / Portfolio / Contact
 * page templates. The page-template Blade views ship only the panel scaffold and
 * emit the EDITABLE page body (Core-sanitized) inside `.cv-panel__body`; the rich
 * Mulan class grammar below styles that authored/seeded content so the composition
 * stays faithful to the purchased Mulan CV layout.
 *
 * Consumes ONLY the semantic tokens declared in tokens.css (both colour schemes
 * follow automatically). Mobile-first; logical properties for RTL-safety.
 * Structural fidelity is established here; final pixel tuning is a runtime/visual
 * certification concern (Gates 12–19), not this static implementation unit.
 */

/* -- Panel shell ---------------------------------------------------------- */
.cv-panel {
    display: block;
    padding-block: var(--nhn-space-section);
}

.cv-panel__inner {
    inline-size: 100%;
    max-inline-size: var(--nhn-content-width);
    margin-inline: auto;
    padding-inline: var(--nhn-space-5);
}

/* Mulan `.section-title .title-main-page` heading treatment. */
.cv-panel .section-title {
    margin-block-end: var(--nhn-space-8);
}

.cv-panel__title {
    font-family: var(--nhn-font-heading);
    font-size: var(--nhn-h1);
    font-weight: var(--nhn-weight-bold);
    line-height: var(--nhn-leading-tight);
    letter-spacing: var(--nhn-tracking-wide);
    text-transform: uppercase;
    color: var(--nhn-heading);
    margin: 0;
}

/* Mulan accent underline beneath the panel title. */
.cv-panel__title::after {
    content: "";
    display: block;
    inline-size: 3rem;
    block-size: 3px;
    margin-block-start: var(--nhn-space-3);
    background-color: var(--nhn-accent);
    border-radius: var(--nhn-radius-pill);
}

.cv-panel__title.visually-hidden::after {
    content: none;
}

.cv-panel__subtitle {
    margin-block: var(--nhn-space-3) 0;
    color: var(--nhn-text-muted);
    font-size: var(--nhn-text-lg);
}

.cv-panel__cover {
    margin: 0 0 var(--nhn-space-6);
}

.cv-panel__cover img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--nhn-radius-md);
}

/* Editable intro block under the CV hero. */
.cv-hero__intro {
    padding-block: var(--nhn-space-8);
}

/* CV template only: Mulan's `#home .start-page` hero is full-bleed across the
   content canvas (rail edge to viewport edge, full viewport height). Release the
   prose framing on <main> when it hosts the CV hero so the hero media can span
   the canvas; inner text stays centred via .section__inner / .container. */
body:not(:has(.site-header)) main:has(> .cv-hero),
main:has(> .cv-hero) {
    max-inline-size: none;
    padding-inline: 0;
    padding-block: 0;
}

/* -- Sub-heading grammar (Mulan `.section-head h4 > span`) ----------------- */
.cv-panel__body .section-head {
    margin-block: var(--nhn-space-8) var(--nhn-space-5);
}

.cv-panel__body .section-head :is(h2, h3, h4) {
    font-size: var(--nhn-h3);
    color: var(--nhn-heading);
    margin: 0;
}

.cv-panel__body .section-head :is(h2, h3, h4) span {
    display: block;
    font-size: var(--nhn-text-sm);
    font-weight: var(--nhn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--nhn-tracking-wide);
    color: var(--nhn-accent-ink);
}

/* -- About panel ---------------------------------------------------------- */
.cv-panel__body .about-intro {
    display: grid;
    gap: var(--nhn-grid-gap);
}

@media (min-width: 48rem) {
    .cv-panel__body .about-intro {
        grid-template-columns: 3fr 2fr;
        align-items: start;
    }
}

.cv-panel__body .about-location {
    display: inline-block;
    margin-block: var(--nhn-space-2);
    color: var(--nhn-accent-ink);
    font-weight: var(--nhn-weight-medium);
}

.cv-panel__body .about-summary {
    display: grid;
    gap: var(--nhn-space-4);
    margin-block: var(--nhn-space-5) 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .cv-panel__body .about-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cv-panel__body .about-summary li {
    padding: var(--nhn-space-4);
    background-color: var(--nhn-surface-muted);
    border-radius: var(--nhn-radius-md);
}

.cv-panel__body .about-summary strong,
.cv-panel__body .about-summary h6 {
    display: block;
    font-size: var(--nhn-text-lg);
    font-weight: var(--nhn-weight-bold);
    color: var(--nhn-heading);
    margin: 0;
}

.cv-panel__body .services {
    display: grid;
    gap: var(--nhn-grid-gap);
    margin-block: var(--nhn-space-6) 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .cv-panel__body .services {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cv-panel__body .service-block {
    padding: var(--nhn-space-5);
    background-color: var(--nhn-card-surface);
    border: var(--nhn-border-width) solid var(--nhn-border-subtle);
    border-radius: var(--nhn-radius-md);
    box-shadow: var(--nhn-shadow-sm);
}

.cv-panel__body .service-block :is(h3, h4) {
    margin: 0 0 var(--nhn-space-2);
    font-size: var(--nhn-h4);
    color: var(--nhn-heading);
}

.cv-panel__body .service-block p {
    margin: 0;
    color: var(--nhn-text);
}

/* -- Resume panel: timeline ----------------------------------------------- */
.cv-panel__body .main-timeline {
    position: relative;
    margin-block: var(--nhn-space-5) 0;
    padding-inline-start: var(--nhn-space-6);
    border-inline-start: 2px solid var(--nhn-divider);
}

.cv-panel__body .timeline {
    position: relative;
    padding-block-end: var(--nhn-space-8);
}

.cv-panel__body .timeline:last-child {
    padding-block-end: 0;
}

/* Accent node on the timeline rail. */
.cv-panel__body .timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-1 * var(--nhn-space-6) - 6px);
    inset-block-start: 0.4rem;
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--nhn-radius-pill);
    background-color: var(--nhn-accent);
    box-shadow: 0 0 0 4px var(--nhn-rail-tint);
}

.cv-panel__body .timeline-content .date {
    display: inline-block;
    font-size: var(--nhn-text-sm);
    font-weight: var(--nhn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--nhn-tracking-wide);
    color: var(--nhn-accent-ink);
}

.cv-panel__body .timeline-content .title {
    margin: var(--nhn-space-1) 0 var(--nhn-space-2);
    font-size: var(--nhn-h4);
    color: var(--nhn-heading);
}

.cv-panel__body .timeline-content .description {
    margin: 0;
    color: var(--nhn-text);
}

/* -- Resume panel: skills ------------------------------------------------- */
.cv-panel__body .skills {
    display: grid;
    gap: var(--nhn-space-4);
    margin-block: var(--nhn-space-5) 0;
    padding: 0;
    list-style: none;
}

.cv-panel__body .skill__name {
    display: flex;
    justify-content: space-between;
    gap: var(--nhn-space-3);
    margin-block-end: var(--nhn-space-2);
    font-weight: var(--nhn-weight-medium);
    color: var(--nhn-text-strong);
}

.cv-panel__body .skill__bar {
    block-size: 8px;
    background-color: var(--nhn-surface-muted);
    border-radius: var(--nhn-radius-pill);
    overflow: hidden;
}

.cv-panel__body .skill__fill {
    display: block;
    block-size: 100%;
    background-color: var(--nhn-accent);
    border-radius: inherit;
}

/* Stepped fill widths — the rich editor / sanitizer strips inline styles, so the
   skill level is expressed with a class from a fixed, documented set. */
.cv-panel__body .skill__fill.is-100 { inline-size: 100%; }
.cv-panel__body .skill__fill.is-95 { inline-size: 95%; }
.cv-panel__body .skill__fill.is-90 { inline-size: 90%; }
.cv-panel__body .skill__fill.is-85 { inline-size: 85%; }
.cv-panel__body .skill__fill.is-80 { inline-size: 80%; }
.cv-panel__body .skill__fill.is-75 { inline-size: 75%; }
.cv-panel__body .skill__fill.is-70 { inline-size: 70%; }
.cv-panel__body .skill__fill.is-65 { inline-size: 65%; }
.cv-panel__body .skill__fill.is-60 { inline-size: 60%; }
.cv-panel__body .skill__fill.is-55 { inline-size: 55%; }
.cv-panel__body .skill__fill.is-50 { inline-size: 50%; }

/* Language skills as star ratings (Mulan `.rating`). */
.cv-panel__body .rating {
    display: inline-flex;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.cv-panel__body .rating li {
    inline-size: 0.9rem;
    block-size: 0.9rem;
    border-radius: var(--nhn-radius-pill);
    background-color: var(--nhn-divider);
}

.cv-panel__body .rating li.is-on {
    background-color: var(--nhn-accent);
}

/* -- Portfolio panel ------------------------------------------------------ */
.cv-panel__body .portfolio-grid {
    display: grid;
    gap: var(--nhn-grid-gap);
    margin-block: var(--nhn-space-5) 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .cv-panel__body .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .cv-panel__body .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cv-panel__body .portfolio-item {
    margin: 0;
    overflow: hidden;
    background-color: var(--nhn-card-surface);
    border: var(--nhn-border-width) solid var(--nhn-border-subtle);
    border-radius: var(--nhn-radius-md);
    box-shadow: var(--nhn-shadow-sm);
}

.cv-panel__body .portfolio-item img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.cv-panel__body .portfolio-item figcaption {
    padding: var(--nhn-space-4);
}

.cv-panel__body .portfolio-item figcaption strong {
    display: block;
    font-size: var(--nhn-h4);
    color: var(--nhn-heading);
}

.cv-panel__body .portfolio-item figcaption .portfolio-cat {
    display: block;
    margin-block-start: var(--nhn-space-1);
    font-size: var(--nhn-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--nhn-tracking-wide);
    color: var(--nhn-accent-ink);
}

/* Empty-media placeholder that preserves the card geometry. */
.cv-panel__body .portfolio-item .portfolio-ph {
    display: block;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(135deg, var(--nhn-surface-muted), var(--nhn-rail-tint));
}

/* -- Contact panel -------------------------------------------------------- */
.cv-panel__body .contact-info {
    display: grid;
    gap: var(--nhn-space-5);
    margin-block: var(--nhn-space-5) 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .cv-panel__body .contact-info {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cv-panel__body .contact-block {
    padding: var(--nhn-space-5);
    background-color: var(--nhn-surface-muted);
    border-radius: var(--nhn-radius-md);
}

.cv-panel__body .contact-block :is(h2, h3) {
    margin: 0 0 var(--nhn-space-2);
    font-size: var(--nhn-h4);
    color: var(--nhn-heading);
}

.cv-panel__body .contact-block p,
.cv-panel__body .contact-block a {
    margin: 0;
    word-break: break-word;
}

.cv-panel__body .contact-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nhn-space-3);
    margin-block: var(--nhn-space-6) 0;
    padding: 0;
    list-style: none;
}

.cv-panel__body .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nhn-space-3);
    margin-block: var(--nhn-space-6) 0;
    padding: 0;
    list-style: none;
}

.cv-panel__body .social-links a {
    display: inline-block;
    padding: var(--nhn-space-2) var(--nhn-space-4);
    border: var(--nhn-border-width) solid var(--nhn-border);
    border-radius: var(--nhn-radius-pill);
    text-decoration: none;
}

.cv-panel__body .social-links a:hover {
    border-color: var(--nhn-accent);
    color: var(--nhn-accent-ink);
}

/* -- Motion preference ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cv-panel__body .skill__fill {
        transition: none;
    }
}