:root{--bg:#0b0b0c;--card:#121214;--text:#f5f7fb;--muted:#ffffff;--brand:#FFC000;--accent:#1f2937;--ring:rgba(245,197,24,.35);--max:1200px;--radius:16px;--shadow:0 8px 30px rgba(0,0,0,.25)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin-inline:auto;padding:0 20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid transparent;background:var(--brand);color:#111;padding:.8rem 1.1rem;border-radius:999px;font-weight:700}
.btn.btn-outline{background:transparent;color:var(--text);border-color:#2b2b2e}
.btn:focus{outline:2px solid var(--ring);outline-offset:3px}
.link{text-decoration:underline}

/* Cards */
.card{background:var(--card);border:1px solid #1e1e22;border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow)}
.card-pad{padding:20px}

/* Section titles */
.section{padding:80px 0}
.kicker{color:var(--brand);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
.title{font-size:clamp(1.5rem, 2.2vw + 1rem, 2.5rem);font-weight:900;margin:.25rem 0}
.subtitle{color:var(--muted);max-width:58ch;margin:10px auto 0}
.center{text-align:center}
.muted{color:var(--muted)}

/* Header */
.navbar{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #1b1b1f;background:rgba(11,11,12,.6)}
.nav-flex{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo { display:flex; align-items:center; gap:.6rem; font-weight:900; }
.logo-img { width:36px; height:36px; display:block; object-fit:contain; }
.logo-text { line-height:1; }
.nav-links{display:none;gap:.25rem}
.nav-links a{padding:.55rem .8rem;border-radius:12px}
.nav-links a:hover{background:#1c1c21}
.nav-cta{display:none;gap:.5rem}
.menu-toggle{display:inline-flex;border:1px solid #2a2a2e;background:transparent;color:var(--text);border-radius:12px;padding:.5rem}
.mobile-menu{display:none;padding:10px 0}
.mobile-menu a{display:block;padding:.65rem .8rem;border-radius:12px}
.mobile-menu a:hover{background:#1c1c21}

/* Hero */
.hero{padding-top:110px;padding-bottom:48px;background:linear-gradient(180deg, rgba(11,11,12,1) 0%, rgba(11,11,12,1) 55%, rgba(18,18,20,.6) 100%)}
.hero-grid{display:grid;gap:24px;grid-template-columns:1fr}
.hero-text h1{font-size:clamp(2rem, 3vw + 1rem, 3.2rem);line-height:1.1;margin:0}
.hero-buttons{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.pill-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:.95rem;margin-top:18px}
.pill{display:inline-flex;align-items:center;gap:.5rem}
.media{aspect-ratio:16/9;overflow:hidden;border-radius:24px;border:1px solid #1f1f23;box-shadow:var(--shadow)}
.hero-caption{font-size:.8rem;margin-top:8px}

/* Content grids */
.cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px}

/* ——— Programs (Tunnit ja treenisisällöt): lempeä brändigradientti ——— */
#programs .card {
    background: linear-gradient(135deg, rgba(245,197,24,0.10), rgba(245,197,24,0.02));
    border-color: rgba(245,197,24,0.28);
  }
  #programs .card h3 { color: #ffffff; }
  #programs .card .muted { color: #efe7c7; } /* lämmin, helposti luettava sävy */
  #programs .card:hover {
    border-color: rgba(245,197,24,0.40);
    box-shadow: 0 10px 30px rgba(245,197,24,0.08);
  }

/* Schedule */
.section-dark{background:#0f0f13}
.schedule-grid{display:grid;gap:24px;grid-template-columns:1fr}
.schedule-embed{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px solid #232327;border-radius:24px}

/* Coaches */
.coach{overflow:hidden}
.coach-img{block-size:220px;background:#0f0f13;position:relative;overflow:hidden;border-bottom:1px solid #1e1e22}
.coach-img img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}

/* Dojo grid */
.dojo{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.shot{border-radius:14px;overflow:hidden;border:1px solid #1f1f23}
.shot img{inline-size:100%;block-size:160px;object-fit:cover}

/* Trial CTA */
.section-accent{padding-block:60px;background:linear-gradient(90deg, rgba(245,197,24,.08), transparent)}
.trial-box{padding:24px 26px}
.trial-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
.trial-cta{justify-self:end}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px}
form{display:grid;gap:12px}
.label{display:block;font-size:.9rem;color:var(--muted)}
input,textarea{background:#0f1013;color:var(--text);border:1px solid #26262a;border-radius:12px;padding:.8rem .9rem}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--ring);outline-offset:2px}
.fineprint{font-size:.8rem;margin:.4rem 0 0;color:var(--muted)}
.contact-items{display:grid;gap:14px}
.contact-item{display:flex;gap:10px;align-items:flex-start}
.contact-title{margin:0;font-weight:600}
.map{border-radius:12px;overflow:hidden}
.socials{display:flex;gap:16px;flex-wrap:wrap}

/* Footer */
.footer{border-top:1px solid #1b1b1f;color:var(--muted);padding:28px 0}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:18px}

/* Responsive */
@media (min-width:760px){
  .nav-links{display:flex}
  .nav-cta{display:flex}
  .menu-toggle{display:none}
  .hero-grid{grid-template-columns:1.1fr .9fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .dojo{grid-template-columns:repeat(3,1fr)}
  .schedule-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .logo-img { width:30px; height:30px; }
}
@media (min-width:1024px){
  .cards{grid-template-columns:repeat(3,1fr)}
}
/* Videon koko hallintaan */
.hero-media{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    /* 16:9-tila – skaalautuu responsiivisesti */
    aspect-ratio: 16 / 9;
    border: 1px solid #ddd; /* valinnainen */
    box-shadow: 0 8px 30px rgba(0,0,0,.08); /* valinnainen */
  }
  
  .hero-media video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* täyttää kehyksen, voi rajata reunoja hieman */
  }
/* Coach-kuvien yläreunaan ankkurointi + siisti rajaus */
#coaches .card img{
    display:block;
    width:100%;
    height:220px;           /* voit säätää */
    object-fit:cover;       /* rajaa tarvittaessa, ei venytä */
    object-position:top;    /* ANKKUROINTI YLÄREUNAAN */
    border-bottom:1px solid #ddd; /* valinnainen */
    border-top-left-radius:12px;  /* siisti kortin yläkulma */
    border-top-right-radius:12px;
  }
  
  @media (min-width: 760px){
    #coaches .card img{ height:260px; }  /* vähän korkeampi isommilla näytöillä */
  }
  /* Keskitetään alarivin kortit vain Valmentajat-osiossa */
#coaches .cards {
    display: flex;          /* ohitetaan yleinen grid vain tässä osiossa */
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center; /* tämä keskittää "vajaan" rivin */
  }
  
  #coaches .cards > .card {
    flex: 1 1 280px;        /* skaalautuva korttileveys */
    max-width: 360px;       /* yläraja, jotta eivät veny liikaa */
  }
  
  @media (min-width: 1024px) {
    #coaches .cards > .card {
      flex-basis: 300px;    /* hieman leveämpi isolla näytöllä */
    }
  }
  /* Community (It Is About Others) – keltainen tausta + luettavat tekstit */
#community,#dojo {
    background: var(--brand);            /* keltainen tausta */
  }
  
  #community,#dojo .kicker,
  #community,#dojo .title,
  #community,#dojo .subtitle {
    color: #ffffff;                         /* tumma teksti keltaisella */
  }
  
  /* kortit voivat säilyä tummina keltaista vasten – ei pakollista muutosta */
  
  /* Review-osion tähtiarvioiden tyylit */
#review .rating {
    display: flex;
    align-items: center;
    justify-content: center; /* keskelle kortissa */
    gap: 10px;
    margin-top: 8px;
  }
  
  #review .stars {
    display: inline-flex;
    line-height: 1;
  }
  
  #review .stars svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    color: var(--brand); /* TFW-keltainen tähdille */
  }
  
  #review h3 { margin: 0 0 .3rem; }
  #review .card strong { color: #fff; }
  
 /* Trial CTA – kuva lohkon sisällä, keskitetyt tekstit */
.trial-box {
    position: relative;
    overflow: hidden;
  }
  
  .trial-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .25;                 /* hieman läpinäkyvä */
    filter: saturate(1.05) contrast(1.05);
  }
  
  /* kevyt tumma overlay, parantaa luettavuutta teeman kanssa */
  .trial-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.15));
    pointer-events: none;
  }
  
  .trial-content {
    position: relative;           /* kuvan ja overlayn yläpuolelle */
    text-align: center;
    display: grid;
    gap: 10px;
    place-items: center;
    padding: 28px 20px;           /* voit kasvattaa tarvittaessa */
  }
  
  .trial-content h3 { 
    color: #fff;                  /* sopii tummempaan taustaan */
    margin: 0;
  }
  
  .trial-content .muted { 
    color: #ece6c9;               /* lämmin, teeman mukainen sävy */
  }
  
  .trial-content .btn { 
    margin-top: 6px; 
  }

  /* Contact form – kentät lähes koko lohkon levyisiksi */
#contact form { 
    justify-items: stretch;          /* venytä ruudukossa */
  }
  #contact form label { display:block; }
  #contact form input,
  #contact form textarea {
    width: 100%;                     /* täysi leveys kortin sisällä */
  }
  
  /* Tee Lähetä-napista selvästi hienompi + keskitetty teksti */
  #contact form .btn {
    display: inline-flex;
    justify-content: center;         /* keskitetty teksti */
    align-items: center;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 0.95rem 1.25rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #f5c518 0%, #eab308 100%);
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 6px 22px rgba(245,197,24,.25), 0 2px 8px rgba(0,0,0,.25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    text-transform: none;
  }
  
  /* Hover/active/focus -fiilis */
  #contact form .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(245,197,24,.25), 0 4px 14px rgba(0,0,0,.25);
    filter: brightness(1.02);
  }
  #contact form .btn:active { transform: translateY(0); }
  #contact form .btn:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
  
  /* Keskitetään nappi itse lomakeruudukassa */
  #contact form button.btn { 
    justify-self: center; 
  }
  
  /* (Valinnainen) jätä 2–4 % "hengitysvaraa" suuremmilla näytöillä */
  @media (min-width: 760px){
    #contact form input,
    #contact form textarea {
      max-width: 96%;
      margin-inline: auto;
    }
  }
  /* Contact: Lähetä-nappi + paper plane -ikoni */
#contact form .btn { 
    gap: .5rem; /* väli tekstin ja ikonin väliin */
  }
  
  #contact form .btn .icon-plane{
    width: 18px;
    height: 18px;
    display: inline-block;
    fill: currentColor;                         /* perii napin tekstivärin */
    transform: translateY(1px);
    opacity: .9;
    transition: transform .2s ease, opacity .2s ease;
  }
  
  #contact form .btn:hover .icon-plane{
    transform: translateX(4px) translateY(-1px) rotate(8deg); /* pieni “lähtö” */
    opacity: 1;
  }
  
  #contact form .btn:active .icon-plane{
    transform: translateX(2px) translateY(0) rotate(4deg);
  }
  
  
/* Map embed */
.map-embed {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #1f1f23;
  }
  .map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
  }

  /* Yhtenäinen ikonipalsta Contact-kohdassa */
#contact .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  
  #contact .contact-item > div:first-child {
    width: 24px;            /* vakioleveys ikonille */
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;         /* poistaa emojien ylimääräisen rivivälin */
    margin-top: 2px;        /* hienosäätö, jotta otsikon kanssa linjassa */
  }
  
  #contact .contact-title { 
    margin: 0; 
    line-height: 1.15;
  }
  
  #contact .contact-item .muted { 
    margin: .25rem 0 0;     /* tasainen väli otsikon ja rivin välillä */
  }
/* Contact – ikonipalsta vakioleveyteen ja tekstit linjaan */
#contact .contact-item{
    display: grid;                    /* ohittaa aiemman flexin tässä osiossa */
    grid-template-columns: 28px 1fr;  /* 28px ikonille, loput tekstille */
    column-gap: 12px;
    align-items: start;
  }
  
  #contact .contact-item > div:first-child{
    width: 28px;
    height: 28px;
    display: grid;                    /* keskitetään emoji laatikkoon */
    place-items: center;
    line-height: 1;                   /* poistaa emojien ylikorkeuden */
    font-size: 18px;                  /* tasainen koko */
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  }
  
  #contact .contact-item > div:last-child{
    min-width: 0;                     /* varmistaa siistin rivinvaihdon */
  }
  
  #contact .contact-title{
    margin: 0;
    line-height: 1.15;
  }
/* Social-linkkien ikonit (Facebook & Instagram) */
#contact .socials .social-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;                 /* väli ikonin ja tekstin väliin */
  }
  
  #contact .socials .social-link .icon{
    width: 18px;
    height: 18px;
    display: inline-block;
    fill: currentColor;       /* perii linkin värin/hover-värin */
    transform: translateY(1px);
    opacity: .95;
    transition: transform .15s ease, opacity .15s ease;
  }
  
  #contact .socials .social-link:hover .icon{
    transform: translateY(-1px);
    opacity: 1;
  }
/* Hero – someikonit ja linkit */
.hero-socials{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin-top:12px;
  }
  
  .hero-socials .social-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:underline;
    color: var(--muted);          /* hillitty perusväri hero-tekstin kanssa */
  }
  
  .hero-socials .social-link:hover{
    color:#fff;                   /* kirkasta hoverissa */
  }
  
  .hero-socials .icon{
    width:18px;
    height:18px;
    display:inline-block;
    fill: currentColor;           /* perii linkin värin */
    transform: translateY(1px);
    transition: transform .15s ease, opacity .15s ease;
    opacity:.95;
  }
  
  .hero-socials .social-link:hover .icon{
    transform: translateY(-1px);
    opacity:1;
  }

/* --- Marketing Section --- */
.marketing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .marketing-grid {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
}

.marketing-media img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}

.marketing-text .btn {
    margin-top: 1.5rem; /* Adjusts the space above the button */
}


/* Kalenterikortti */
.fc-card { padding: 0; overflow: hidden; }

/* FullCalendarin värit (sopii section-darkiin) */
#tfwCalFC{
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgba(255,255,255,.04);
  --fc-border-color: rgba(255,255,255,.08);
  --fc-today-bg-color: rgba(245,197,24,.12);
  --fc-list-event-hover-bg-color: rgba(245,197,24,.10);

  --fc-event-bg-color:#f5c518;
  --fc-event-border-color:#f5c518;
  --fc-event-text-color:#111;

  --fc-button-text-color:#fff;
  --fc-button-bg-color: transparent;
  --fc-button-border-color: rgba(255,255,255,.18);
  --fc-button-hover-bg-color: rgba(255,255,255,.08);
  --fc-button-hover-border-color: rgba(255,255,255,.28);
  --fc-button-active-bg-color:#f5c518;
  --fc-button-active-border-color:#f5c518;
  --fc-button-active-text-color:#111;
}
.fc .fc-toolbar-title{ font-size:1.25rem; font-weight:700; }
.fc .fc-col-header-cell-cushion{ padding:.5rem .25rem; }
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion{ padding:.2rem .3rem; }
.fc .fc-timegrid-slot{ height:1.6em; }

/* Pienillä ruuduilla tiiviimpi fonttikoko */
@media (max-width:520px){
  #tfwCalFC{ font-size:14px; }
}