/* ==========================================================================
   Otava-ilme alasivuille (11/2026)
   Lisää etusivun styles/otava.css:n päälle alasivujen omat osat. Luokat alkavat ot-.
   Sivun main: class="ot-page ot-sub". Värit tulevat teematokeneista (tumma ja vaalea).
   Huom: styles.css värittää b/strong-elementit !important-säännöllä ja span/p/div/label
   -elementit var(--text)-värillä, joten värit asetetaan luokilla.
   ========================================================================== */

/* Murupolku ja hero */
.ot-crumb { margin: 0; padding-top: clamp(96px, 10vw, 118px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; list-style: none; font: 500 12px/1.4 var(--ot-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-ink-4); }
.ot-crumb a { color: var(--ot-ink-3) !important; text-decoration: none; padding: 12px 0; }
.ot-crumb a:hover { color: var(--ot-red-text) !important; }
.ot-crumb li + li::before { content: "/"; margin-right: 10px; color: var(--ot-ink-4); }
.ot-crumb [aria-current] { color: var(--ot-ink-2); }
.ot-sub .ot-hero { padding-top: 22px; }
/* Ilman murupolkua (404) hero tarvitsee tilan kiinteän ylätunnisteen alta, ja yksinään se tarvitsee alatilan */
.ot-sub .ot-wrap > .ot-hero:first-child { padding-top: clamp(110px, 12vw, 140px); }
.ot-sub .ot-hero:only-child { padding-bottom: clamp(56px, 8vw, 110px); }
.ot-sub .ot-hero h1 { font-size: clamp(32px, 3.9vw, 54px); }
.ot-sub .ot-hero h1 span { display: inline; }
.ot-sub .ot-hero h1 span::after { display: none; }
.ot-hero-text strong { color: var(--ot-ink) !important; }

/* Alkuperäisen heron kuva nauhana heron alla (matalampi kuin etusivulla) */
.ot-sub .ot-band { height: clamp(240px, 34vw, 600px); margin-top: 6px; margin-bottom: -40px; }
/* Alasivujen kuvat ovat vaaleita salikuvia: ei screen-sekoitusta (vaalea tausta palaisi puhki).
   Leveä nauha näyttää kuvasta vain kaistaleen, joten häivytys on kevyempi ja rajauskohta valitaan kuvan mukaan. */
.ot-sub .ot-band > img { mix-blend-mode: normal; object-position: 50% 40%; opacity: 0.9; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%); }
/* Etusivun hahmokuva: päät kuvan yläreunassa, joten rajaus ylös ja ylähäivytys kapea */
.ot-sub .ot-band > img[src*="oulunjujutsu-www-hero"] { object-position: 50% 8%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 80%, transparent 100%); }
/* Kenjutsu: bokkenit kuvan alaosassa */
.ot-sub .ot-band > img[src*="Kenjutsu_tutustuminen"] { object-position: 50% 62%; }
/* Diesel: päät kuvan yläneljänneksessä */
.ot-sub .ot-band > img[src*="hero-real"] { object-position: 50% 32%; }

/* Heron sivukortti (esim. treeniajat), samaa sukua kuin etusivun "Löydä oma treenisi" */
.ot-aside { flex: 1 1 360px; min-width: 0; max-width: 480px; margin-top: 6px; display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 26px; border-radius: 4px; border: 1px solid var(--ot-line); background: var(--ot-card); box-shadow: inset 0 10px 0 var(--c, var(--ot-hoku)), inset 0 -10px 0 var(--c, var(--ot-hoku)), 0 30px 60px rgba(0, 0, 0, 0.35); }
.ot-aside h2 { margin: 0; font: 900 clamp(24px, 2.4vw, 30px)/1.05 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-aside p { margin: 0; font: 400 15px/1.55 Roboto, sans-serif; color: var(--ot-ink-3); }
.ot-aside .ot-btn { width: 100%; }
.ot-times { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ot-times li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--ot-line); }
.ot-times li:last-child { border-bottom: 0; }
.ot-times .d { grid-row: span 2; font: 900 16px/1.3 Roboto, sans-serif; text-transform: uppercase; color: var(--c, var(--ot-ink)); }
/* Lajivärit eivät täytä kontrastia valkoisella, joten vaaleassa teemassa päivä on tumma */
:root[data-theme="light"] .ot-times .d { color: var(--ot-ink); }
.ot-times .t { font: 700 16px/1.3 var(--ot-mono); font-variant-numeric: tabular-nums; color: var(--ot-ink); }
.ot-times .g { font: 400 14px/1.4 Roboto, sans-serif; color: var(--ot-ink-3); }
.ot-social { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; font: 500 12px/1.3 var(--ot-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-ink-3); }
.ot-social > span { margin-right: 8px; }
.ot-social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ot-line); color: var(--ot-ink) !important; }
.ot-social a:hover { border-color: var(--ot-red); color: var(--ot-red-text) !important; }

/* Yleinen paneeli ja tekstilaatikot */
.ot-panel { padding: clamp(22px, 3.6vw, 40px); border-radius: 18px; border: 1px solid var(--ot-line); background: var(--ot-card); }
.ot-panel h3 { margin: 0; font: 900 clamp(22px, 2.2vw, 28px)/1.1 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-panel p, .ot-course p { margin: 0; font: 400 16px/1.65 Roboto, sans-serif; color: var(--ot-ink-2); }
.ot-panel p strong, .ot-course p strong, .ot-facts strong { color: var(--ot-ink) !important; }
.ot-course h3 { margin: 0; font: 900 clamp(22px, 2.4vw, 30px)/1.1 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
/* .ot-facts voi olla myös div, jossa otsikko ja dl (otsikko ei saa olla dl:n sisällä) */
.ot-facts dl { margin: 0; }
.ot-facts dl > div { padding: 18px 0; border-bottom: 1px solid var(--ot-line); display: flex; flex-direction: column; gap: 6px; }
.ot-facts dl > div:last-child { border-bottom: 0; }
.ot-facts h3 { margin: 18px 0 2px; font: 500 12px/1.3 var(--ot-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-ink-3); }
.ot-perk strong { color: var(--ot-ink) !important; }
.ot-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 0 6px; border-top: 1px solid var(--ot-line); font: 500 13px/1.4 var(--ot-mono); letter-spacing: 0.04em; color: var(--ot-ink-3); }

/* Kuvakortit (sisältöalueet) */
.ot-icards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.ot-icard { margin: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; border: 1px solid var(--ot-line); background: var(--ot-card); }
.ot-icard > img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
.ot-icard figcaption { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.ot-icard .n { font: 700 13px/1 var(--ot-mono); color: var(--ot-red-text); letter-spacing: 0.08em; }
.ot-icard h3 { margin: 0; font: 900 22px/1.12 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-icard p { margin: 0; font: 400 16px/1.6 Roboto, sans-serif; color: var(--ot-ink-3); }

/* Numeroidut tekstikortit ilman kuvaa */
.ot-ncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.ot-ncard { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; border-radius: 14px; border: 1px solid var(--ot-line); background: var(--ot-card); box-shadow: inset 0 4px 0 var(--c, var(--ot-red)); }
.ot-ncard .n { font: 700 13px/1 var(--ot-mono); color: var(--ot-red-text); letter-spacing: 0.08em; }
.ot-ncard h3 { margin: 0; font: 900 21px/1.15 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-ncard p, .ot-ncard li { margin: 0; font: 400 16px/1.6 Roboto, sans-serif; color: var(--ot-ink-3); }
.ot-ncard ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ot-ncard strong { color: var(--ot-ink) !important; }

/* Vyöpolku: tatamimatot vyön värillä */
.ot-beltrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.ot-beltmat { position: relative; padding: 22px 18px 24px; min-height: 190px; display: flex; flex-direction: column; gap: 10px; border-radius: 4px; background: var(--ot-mat); box-shadow: inset 0 8px 0 var(--bc), inset 0 -8px 0 var(--bc); }
.ot-beltmat .k { font: 700 12px/1 var(--ot-mono); letter-spacing: 0.12em; color: var(--ot-ink-3); text-transform: uppercase; }
.ot-beltmat h3 { margin: 0; font: 900 19px/1.15 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-beltmat p { margin: 0; font: 400 15px/1.55 Roboto, sans-serif; color: var(--ot-ink-3); }
.ot-beltmat.dan { box-shadow: inset 0 8px 0 #050505, inset 0 -8px 0 #050505, inset 0 0 0 1px var(--ot-line); }

/* Latauslinkit (PDF) */
.ot-dl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 18px; }
.ot-dl-head h3 { margin: 0; font: 900 clamp(22px, 2.4vw, 30px)/1.1 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.ot-dl a { position: relative; min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 44px 14px 22px; border-radius: 4px; text-decoration: none; background: var(--ot-card); border: 1px solid var(--ot-line); box-shadow: inset 6px 0 0 var(--bc, var(--ot-red)); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.ot-dl a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ot-ink) 30%, transparent); }
.ot-dl a::after { content: "\2193"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 700 18px/1 var(--ot-mono); color: var(--ot-ink-3); }
.ot-dl .tt { font: 900 16px/1.2 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-dl .st { font: 500 12px/1.3 var(--ot-mono); letter-spacing: 0.06em; color: var(--ot-ink-3); }

/* Valmentajat */
.ot-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.ot-people .ot-person { flex: none; }
.ot-person .rk.dan::before { background: #050505; }
/* Seuran logo valmentajakuvan paikalla, kunnes oikea kuva saadaan */
.ot-person img.ot-logo-ph { object-fit: contain; padding: 14px; background: var(--ot-bg); }

/* Galleria (script.js käyttää .gallery-item- ja #galleryLightbox-rakennetta) */
.ot-sub .gallery-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important; gap: 10px !important; }
.ot-sub .gallery-item { border-radius: 10px !important; overflow: hidden; border: 1px solid var(--ot-line) !important; background: var(--ot-card) !important; cursor: zoom-in; }
.ot-sub .gallery-img-wrapper { aspect-ratio: 4 / 5; }
.ot-sub .gallery-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.ot-sub .gallery-item:hover img { transform: scale(1.04); }

/* Treeniajat ja sali: punertava paneeli (sama kuin etusivun peruskurssi) */
.ot-place { display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; }
.ot-place > .ot-stack { flex: 1 1 460px; min-width: 0; gap: 18px; }
.ot-place figure { flex: 1 1 340px; min-width: 0; margin: 0; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--ot-line); }
.ot-place figure img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; }
.ot-place figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(to top, rgba(5, 8, 12, 0.92), transparent); }
.ot-place figcaption b { font: 900 17px/1.2 Roboto, sans-serif; text-transform: uppercase; color: #fff !important; }
.ot-place figcaption span { font: 400 14px/1.4 Roboto, sans-serif; color: rgba(255, 255, 255, 0.82); }

/* Usein kysytyt (script.js: .faq-item / .faq-question / .faq-answer) */
.ot-faq { display: flex; flex-direction: column; border-top: 1px solid var(--ot-line); }
.ot-faq .faq-item { border-bottom: 1px solid var(--ot-line) !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
.ot-faq .faq-question { width: 100%; min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 0 !important; background: transparent !important; border: 0 !important; text-align: left; cursor: pointer; font: 700 18px/1.35 Roboto, sans-serif !important; color: var(--ot-ink) !important; }
.ot-faq .faq-question::after { content: "+"; flex: 0 0 auto; font: 400 26px/1 Roboto, sans-serif; color: var(--ot-ink-3); }
.ot-faq .faq-item.active .faq-question::after, .ot-faq .faq-question[aria-expanded="true"]::after { content: "\2212"; }
/* Vastaus avautuu script.js:n max-height-arvolla, joten väli on sisällön marginaalissa eikä paddingissa */
.ot-faq .faq-answer { padding: 0 !important; overflow: hidden; }
.ot-faq .faq-answer > :last-child { margin-bottom: 20px; }
.ot-faq .faq-answer p { margin: 0 0 10px; max-width: 72ch; font: 400 16px/1.65 Roboto, sans-serif; color: var(--ot-ink-2); }
.ot-faq .faq-answer strong { color: var(--ot-ink) !important; }
.ot-faq .faq-answer a, .ot-panel p a, .ot-ncard a, .ot-price a { color: var(--ot-red-text) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Hinnasto */
.ot-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.ot-price { padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 14px; border-radius: 14px; border: 1px solid var(--ot-line); background: var(--ot-card); box-shadow: inset 0 6px 0 var(--c, var(--ot-red)); }
.ot-price h3 { margin: 0; font: 900 22px/1.15 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-price .amt { font: 900 clamp(38px, 4vw, 52px)/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: var(--ot-ink); }
.ot-price .amt small { font: 500 14px/1 var(--ot-mono); letter-spacing: 0.04em; color: var(--ot-ink-3); margin-left: 6px; }
.ot-price p, .ot-price li { margin: 0; font: 400 15px/1.6 Roboto, sans-serif; color: var(--ot-ink-3); }
.ot-price ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ot-price strong { color: var(--ot-ink) !important; }
.ot-tablewrap { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 14px; border: 1px solid var(--ot-line); background: var(--ot-card); }
.ot-table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 15px/1.5 Roboto, sans-serif; color: var(--ot-ink-2); }
.ot-table th { text-align: left; padding: 14px 18px; font: 500 12px/1.3 var(--ot-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ot-ink-3); border-bottom: 1px solid var(--ot-line); }
.ot-table td { padding: 14px 18px; border-bottom: 1px solid var(--ot-line); vertical-align: top; }
.ot-table tr:last-child td { border-bottom: 0; }
.ot-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ot-ink); font-weight: 700; }

/* Pitkä teksti (säännöt, tietosuoja) */
.ot-prose { max-width: 76ch; display: flex; flex-direction: column; gap: 14px; }
.ot-prose h2 { margin: 26px 0 0; font: 900 clamp(22px, 2.4vw, 30px)/1.12 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-prose h3 { margin: 12px 0 0; font: 700 19px/1.3 Roboto, sans-serif; color: var(--ot-ink); }
.ot-prose p, .ot-prose li { margin: 0; font: 400 17px/1.7 Roboto, sans-serif; color: var(--ot-ink-2); }
.ot-prose ul, .ot-prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.ot-prose strong { color: var(--ot-ink) !important; }
.ot-prose a { color: var(--ot-red-text) !important; text-decoration: underline; text-underline-offset: 3px; }
.ot-tablewrap:focus-visible { outline: 2px solid var(--ot-ink); outline-offset: 3px; }

/* Video-upotus (Diesel) */
.ot-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--ot-line); background: #000; }
.ot-embed iframe, .ot-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Lopun kehotus */
.ot-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px 40px; padding: clamp(26px, 4vw, 48px); border-radius: 18px; border: 1px solid rgba(255, 9, 21, 0.45); background: linear-gradient(110deg, rgba(255, 9, 21, 0.14), var(--ot-card) 55%); }
.ot-cta h2 { margin: 0; font: 900 clamp(26px, 3vw, 40px)/1.05 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.ot-cta p { margin: 8px 0 0; font: 400 17px/1.55 Roboto, sans-serif; color: var(--ot-ink-2); max-width: 56ch; }

/* Sisäänkäynti vierittäessä samoin kuin etusivulla (pelkkä siirto, ei häivytystä) */
@supports (animation-timeline: view()) {
  .ot-sub .ot-icards, .ot-sub .ot-ncards, .ot-sub .ot-beltrow, .ot-sub .ot-people, .ot-sub .ot-place, .ot-sub .ot-prices, .ot-sub .ot-cta, .ot-sub .ot-panel { animation: ot-enter linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}

/* Pitkät suomen yhdyssanat (esim. VYÖARVOJÄRJESTELMÄ) eivät saa katketa kesken sanan kapealla näytöllä */
.ot-sub .ot-h2, .ot-sub .ot-hero h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

@media (max-width: 760px) {
  /* Etusivulla heron napit piilotetaan mobiilissa (alapalkki hoitaa), alasivuilla ne näkyvät */
  .ot-sub .ot-hero-text > .ot-btns { display: flex; }
  /* otava.css purkaa heron tekstin (display: contents, order 1); sivukortti tulee otsikon ja nappien jälkeen */
  .ot-sub .ot-aside { order: 2; }
  .ot-sub .ot-h2 { font-size: clamp(26px, 7.6vw, 40px); }
  .ot-sub .ot-hero h1 { font-size: clamp(28px, 8vw, 40px); }
  .ot-aside { max-width: none; padding: 24px 20px 22px; }
  .ot-beltrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-beltmat { min-height: 0; padding: 18px 14px 20px; }
  .ot-beltmat h3 { font-size: 16px; }
  .ot-person img { width: 92px; height: 92px; }
  .ot-cta .ot-btns { width: 100%; }
  .ot-cta .ot-btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  /* Kapealla näytöllä valmentajan kuva ja pitkä esittely allekkain */
  .ot-person { flex-direction: column; align-items: flex-start; }
  .ot-person img { width: 100%; height: auto; max-height: 300px; aspect-ratio: 1 / 1; }
  .ot-person img.ot-logo-ph { width: 116px; height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-dl a, .ot-sub .gallery-item img { transition: none !important; }
}

/* Hintataulukko mahtuu kapealle näytölle ilman piilotettuja sarakkeita */
@media (max-width: 600px) {
  .ot-table { min-width: 0; }
  .ot-table th, .ot-table td { padding: 12px 10px; }
}