/* Portraits and course details extend the approved NUEVALMA visual system. */
.course-row { grid-template-columns: minmax(0, 1.8fr) minmax(190px, .8fr) 98px; gap: 28px; padding: 20px 0; min-height: 160px; }
.course-row:hover { background: transparent; }
.course-heading { margin: 0; min-width: 0; }
.course-identity { width: 100%; font: 400 16px/1.55 var(--sans); display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 27px; align-items: center; text-align: left; padding: 0; background: transparent; color: var(--ink); min-width: 0; }
.portrait-group { display: block; position: relative; width: 110px; height: 124px; overflow: hidden; background: #111d17; }
.portrait-group img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(1); transition: filter .4s ease, transform .5s ease; }
.portrait-group .portrait-zakia { object-position: center 8%; }
.portrait-group .portrait-francesca { object-position: center 22%; }
.portrait-group .portrait-valentina { object-position: center 25%; }
.portrait-couple img { object-fit: contain; background: #080c0b; }
.portrait-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 110px; }
.portrait-duo img { min-width: 0; }
.course-name { display: block; font-size: clamp(27px,2.6vw,35px); line-height: 1.15; transition: color .2s; }
.course-intro { display: block; font-size: 14px; margin-top: 8px; color: var(--muted); }
.course-more { display: block; font-size: 12px; font-weight: 600; margin-top: 12px; color: var(--ink); }
.course-time { font-size: 14px; line-height: 1.45; }
.course-slot + .course-slot { margin-top: 10px; }
.slot-day { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.slot-time { display: block; white-space: nowrap; }
.course-open { width: 98px; height: 48px; font-size: 13px; background: var(--forest); border-color: var(--forest); color: var(--cream); }
.course-open:hover { color: var(--forest); }
.course-footnote { font-size: 12px; line-height: 1.6; }
.no-script-note { padding: 24px 0; }.no-script-note a { text-decoration: underline; }
.coming-course { margin-top: 25px; padding: 28px; display: grid; grid-template-columns: 90px minmax(0,1fr) auto; gap: 24px; align-items: center; border: 1px solid var(--line); background: var(--cream); }
.coming-mark { display: grid; place-items: center; background: var(--forest); width: 90px; height: 90px; }
.coming-mark img { width: 70px; height: auto; }
.coming-label { font-size: 10px; letter-spacing: .1em; font-weight: 600; }
.coming-course h3 { font-size: 35px; margin-top: 10px; }
.coming-course p { font-size: 14px; margin-top: 9px; color: var(--muted); max-width: 390px; }
.coming-button { min-height: 48px; padding: 10px 14px; background: transparent; border: 1px solid var(--line); font-size: 13px; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; }
.coming-button span { font-size: 23px; }.coming-button:hover { background: var(--lime); }
.open-week-note { background: var(--forest); color: var(--cream); padding: 26px 30px; margin-top: 27px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.open-week-note .eyebrow { font-size: 10px; color: var(--lime); }
.open-week-note > div > strong { font-family: var(--display); display: block; font-size: 29px; margin-top: 5px; }
.open-week-note p { font-size: 13px; margin-top: 5px; line-height: 1.65; }
.open-week-note > p { padding-left: 28px; border-left: 1px solid #ffffff33; }

/* The two WhatsApp communities have a distinct place and purpose. */
.community-intro { font-size: 17px; line-height: 1.7; margin-top: 25px; color: var(--muted); }
.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.community-card { padding: 38px; min-width: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.community-info { background: var(--lime); color: var(--forest); }
.community-nights { background: var(--forest); color: var(--cream); }
.community-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.community-index { font-family: var(--display); font-size: 42px; line-height: 1; opacity: .5; }
.community-card h3 { font-size: clamp(40px,4.7vw,64px); line-height: 1.08; margin-top: 24px; letter-spacing: -.02em; }
.community-nights h3 { color: var(--lime); }
.community-card > p { font-size: 15px; line-height: 1.75; margin-top: 23px; max-width: 370px; }
.community-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 35px; }
.community-tags span { border: 1px solid currentColor; border-radius: 20px; padding: 5px 11px; font-size: 11px; }
.community-join { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 54px; padding: 10px 0; font-weight: 600; font-size: 14px; margin-top: auto; border-top: 1px solid currentColor; }
.community-join > span { font-size: 30px; transition: transform .25s ease; }
.community-card small { font-size: 11px; opacity: .85; }
.show-banner { display: grid; grid-template-columns: 1.4fr .8fr; gap: 35px; background: #102b23; color: var(--cream); margin-top: 24px; overflow: hidden; }
.show-copy { padding: 44px 48px; align-self: center; }
.show-copy .eyebrow { color: var(--lime); font-size: 11px; }
.show-copy h3 { font-size: clamp(38px,4.5vw,62px); line-height: 1.08; margin-top: 20px; }
.show-copy p { font-size: 15px; line-height: 1.7; margin-top: 22px; }
.show-copy .underlined-action { margin-top: 22px; font-size: 14px; }
.show-photo { min-height: 390px; background: #080c0b; }
.show-photo img { width: 100%; height: 100%; max-height: 480px; object-fit: contain; }

/* A course opens in a full, usable detail view, with real colour photography. */
.course-dialog { width: min(920px,calc(100% - 32px)); background: var(--cream); padding: 0; }
.course-dialog-top { position: sticky; top: 0; z-index: 3; padding: 14px 24px; display: flex; gap: 20px; align-items: center; justify-content: space-between; background: var(--cream); border-bottom: 1px solid var(--line); }
.course-dialog-top .eyebrow { font-size: 10px; }
.course-detail-layout { display: grid; grid-template-columns: minmax(0,.83fr) minmax(0,1.17fr); }
.detail-visual { position: relative; min-height: 490px; background: #080c0b; }
.detail-visual .portrait-group { position: absolute; width: 100%; height: 100%; }
.detail-visual .portrait-group img { filter: none; transform: none; object-position: center 15%; }
.detail-visual .portrait-couple img { object-fit: contain; }
.detail-visual .portrait-duo { gap: 3px; }
.detail-visual .portrait-zakia { object-position: center 5%; }
.detail-photo-caption { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent,#000c); color: white; padding: 35px 20px 20px; font-size: 12px; }
.detail-visual.is-upcoming { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px; gap: 35px; background: var(--forest); }
.is-upcoming > img { width: 175px; height: auto; }
.upcoming-visual-title { font-family: var(--display); font-size: 38px; color: var(--lime); line-height: 1.15; text-align: center; }
.detail-copy { padding: 30px 34px 28px; min-width: 0; }
.detail-category { font-size: 10px; letter-spacing: .12em; font-weight: 600; }
.detail-copy h2 { font-size: clamp(38px,4vw,54px); line-height: 1.1; margin-top: 12px; }
.detail-teacher { font-size: 16px; margin-top: 11px; color: #3c624a; }
.detail-description { font-size: 15px; line-height: 1.65; margin-top: 21px; }
.detail-facts { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.detail-facts > div + div { margin-top: 15px; }
.detail-facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
.detail-facts dd { margin: 0; white-space: pre-line; font-size: 14px; line-height: 1.6; }
.detail-launch { margin-top: 19px; padding-left: 12px; border-left: 3px solid #8da650; font-size: 12px; line-height: 1.6; color: var(--muted); }
.detail-trial { width: 100%; margin-top: 25px; min-height: 54px; font-size: 14px; gap: 12px; }
.detail-hint { font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 10px; }
.course-dialog-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 24px; border-top: 1px solid var(--line); background: var(--cream); }
.course-dialog-bottom > span { font-size: 11px; letter-spacing: .1em; }
.course-dialog-bottom button { min-height: 44px; background: transparent; padding: 8px 0; display: inline-flex; align-items: center; gap: 20px; font-size: 12px; color: var(--ink); }
.course-dialog-bottom button span { font-size: 24px; }

@media (hover:hover) {
 .course-identity:hover .portrait-group img,.course-identity:focus-visible .portrait-group img { filter: grayscale(0); transform: scale(1.035); }
 .course-identity:hover .course-more { text-decoration: underline; text-underline-offset: 4px; }
 .community-join:hover > span { transform: translate(3px,-3px); }
}
@media (min-width:801px) and (max-width:1100px) {
 .course-row { grid-template-columns: minmax(0,1.5fr) minmax(150px,.8fr) 84px; gap: 18px; }
 .course-identity { grid-template-columns: 92px minmax(0,1fr); gap: 19px; }
 .course-identity .portrait-group { width: 92px; height: 112px; }
 .course-open { width: 84px; }
}
@media (max-width:800px) {
 .course-row { grid-template-columns: minmax(0,1.4fr) minmax(125px,.7fr) 78px; gap: 14px; }
 .course-identity { grid-template-columns: 82px minmax(0,1fr); gap: 17px; }
 .course-identity .portrait-group { width: 82px; height: 105px; }
 .course-name { font-size: 28px; }.course-intro { font-size: 13px; }
 .course-open { width: 78px; }
 .community-card { padding: 28px; }.community-card h3 { font-size: 43px; }
 .show-copy { padding: 32px; }.show-photo { min-height: 360px; }
 .detail-copy { padding: 24px; }
 .course-detail-layout { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
}
@media (max-width:580px) {
 .course-heading { grid-column: 1/-1; grid-row: 1; }
 .course-row { grid-template-columns: minmax(0,1fr) 88px; column-gap: 15px; row-gap: 17px; padding: 22px 0; }
 .course-identity { grid-column: 1/-1; grid-row: 1; grid-template-columns: 82px minmax(0,1fr); gap: 18px; }
 .course-identity .portrait-group { width: 82px; height: 98px; }
 .course-name { font-size: clamp(27px,8vw,34px); }.course-intro { font-size: 14px; margin-top: 5px; }
 .course-more { font-size: 12px; margin-top: 9px; }
 .course-time { grid-column: 1; grid-row: 2; padding-left: 0; font-size: 14px; }
 .course-open { grid-column: 2; grid-row: 2; width: 88px; height: 48px; font-size: 13px; }
 .course-slot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
 .slot-day { margin: 0; font-size: 12px; }
 .course-slot + .course-slot { margin-top: 7px; }
 .coming-course { grid-template-columns: 60px minmax(0,1fr); gap: 17px; padding: 21px; }
 .coming-mark { height: 60px; width: 60px; }.coming-mark img { width: 48px; }
 .coming-course h3 { font-size: 31px; }.coming-label { font-size: 9px; line-height: 1.6; display: block; }
 .coming-course p { font-size: 13px; }.coming-button { grid-column: 1/-1; width: 100%; font-size: 14px; }
 .open-week-note { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
 .open-week-note > p { padding: 17px 0 0; border-left: 0; border-top: 1px solid #ffffff33; }
 .community-intro { font-size: 15px; }.community-grid { grid-template-columns: 1fr; gap: 17px; margin-top: 29px; }
 .community-card { padding: 27px; }.community-card h3 { font-size: clamp(42px,12vw,58px); }
 .community-card > p { font-size: 15px; }.community-tags { margin: 24px 0 30px; }
 .community-join { font-size: 14px; }.community-card-top { font-size: 9px; }
 .show-banner { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }.show-copy { padding: 28px; }
 .show-copy h3 { font-size: 46px; }.show-copy .eyebrow { font-size: 10px; }
 .show-photo { min-height: 0; height: 300px; }.show-photo img { object-position: center; }
 .course-dialog { width: calc(100% - 24px); }
 .course-dialog-top { padding: 10px 16px; }.course-dialog-top .eyebrow { font-size: 9px; }
 .course-detail-layout { grid-template-columns: 1fr; }
 .detail-visual { height: 220px; min-height: 0; }
 .detail-visual .portrait-group { width: 100%; max-width: 320px; left: 50%; transform: translateX(-50%); }
 .detail-visual .portrait-group img { object-position: center 14%; }
 .detail-visual .portrait-couple img { object-fit: contain; }
 .detail-visual .portrait-duo { max-width: 280px; }
 .detail-visual.is-upcoming { height: 210px; padding: 25px; gap: 15px; }
 .is-upcoming > img { width: 105px; }.upcoming-visual-title { font-size: 28px; }
 .detail-copy { padding: 24px; }.detail-copy h2 { font-size: 42px; }
 .detail-description { font-size: 15px; }.detail-teacher { font-size: 16px; }
 .course-dialog-bottom { padding: 10px 16px; gap: 10px; }.course-dialog-bottom button { gap: 10px; font-size: 11px; }
}
@media (max-height:520px) and (min-width:581px) {
 .course-dialog-top { padding: 8px 20px; }.detail-visual { min-height: 420px; }
}
@media (prefers-reduced-motion:no-preference) {
 .reveal-enter { animation: section-arrives .6s ease both; }
 .course-dialog[open] .detail-copy { animation: detail-arrives .3s ease both; }
 @keyframes section-arrives { from { transform: translateY(16px); opacity: .7; } to { transform: none; opacity: 1; } }
 @keyframes detail-arrives { from { transform: translateY(5px); opacity: .7; } to { transform: none; opacity: 1; } }
}

/* Keep faces legible in the small course portraits. */
.course-identity .portrait-couple img { object-fit: cover; object-position: center 12%; }
.course-identity .portrait-valentina { transform: scale(1.6); transform-origin: 60% 34%; }
@media (hover:hover) { .course-identity:hover .portrait-valentina, .course-identity:focus-visible .portrait-valentina { transform: scale(1.65); } }
@media (max-width:580px) { .detail-visual .portrait-group .portrait-zakia { object-position: center top; } }

.footer-links { display: flex; gap: 22px; margin-top: 7px; letter-spacing: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }