/* style.css - TWG Education onepage (placeholders) */
/* Mobile-first, responsive */

/* Variables */
:root{
    --container-width: 1240px; /* 1440 - 100px margins each side = 1240 */
    --page-padding: 24px;
    --green-dark: #04461f;
    --green-mid: #1f5b3f;
    --green-light: #8cbf46;
    --blue: #187c7f;
    --orange: #f49d27;
    --text: #222;
    --muted: #7a7a7a;
    --bg: #ffffff;
    --max-width: 1240px;
    --gap: 24px;
    --radius: 14px;
  }
  
  /* Basic resets */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: "Aspira", Arial, sans-serif; /* necháváš font jak chceš */
    color:var(--text);
    background: #ffffff; /*var(--bg);*/
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    font-size:16px;
  }
  a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
  }
  .bold {
    font-weight: bold;
  }
  .green {
    color: #04461f;
  }
  .green-light {
    color: #8cbf46;
  }
  .orange {
    color: #f49d27;
  }
  /* Container matching 12-col layout with side margins ~100px at 1440 */
  .container{
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
  }
  
  .hero-wrapper {
    background-image: url('assets/HERO_section_&2x.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* 🔥 Trik: posuneme pozadí nahoru pod header */
    margin-top: -185px; /* nastav podle výšky headeru */
    padding-top: 170px; /* kompenzace, aby se obsah neposunul */
  }

  /* ----------------------------
     HEADER (sticky) + unified background
     ---------------------------- */
    .site-header {
    /*position: sticky;*/
    top: 0;
    z-index: 1000;
    background: transparent;
    }

  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px; /*20px 0;*/
  }

  /* Logos */
  .logos{display:flex;align-items:center;gap:16px}
  .logo-bio{
    width:129px;height:129px;border-radius:50%;
    /*background:linear-gradient(180deg,#fff,#eee);*/
    display:flex;align-items:center;justify-content:center;
    /*font-weight:700;
    color:var(--green-dark);
    border:4px solid rgba(0,0,0,0.03);*/
  }
  .logo-bio.small{width:95px;height:95px;font-size:12px;position:relative;left:-22vw;}

  /* Nav */
  .main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:20px}
  .main-nav a {
    color:white;text-decoration:none;font-weight:300;padding:6px 10px;border-radius:6px;
    font-size: 22px;
    letter-spacing: 1px;}
  .main-nav a:hover{opacity:1; color:#8cbf46;}

  /* hamburger button (hidden on desktop) */
  .hamburger{
    display:none;
    background:none;
    border:0;
    color:white;
    font-size:28px;
    padding:6px;
    cursor:pointer;
  }

  /* HERO
     → NOTE: we remove hero background here so the background comes from .site-header
  */
  .hero{
    height:600px;
    background: none !important; /* hero je průhledné, pozadí je ve wrapperu */
    display:flex;
    align-items:center;
    color:#fff;
    margin-top: 0;
    padding-top: 40px; /* aby obsah nebyl pod sticky headerem */
  }
  .hero-overlay{
    display:none; /* overlay removed, as requested */
  }
  .hero-content{
    /*max-width:960px;*/
    margin:0 auto;
    text-align:center;
    padding:0 12px;
  }
  .hero h1{
    margin:0 0 12px 0;
    font-size:48px;
    letter-spacing:1px;
    font-weight:800;
  }
  .lead{max-width:800px;margin:0 auto 30px;color:rgba(255,255,255,0.92);font-weight: 300;}
  
  /* scroll-down icon */
  .scroll-down{
    display:inline-block;
    text-decoration:none;
    margin-top:28px;
    color:white;
    width:48px;height:48px;border-radius:24px;
    border:2px solid rgba(255,255,255,0.6);
    display:flex;align-items:center;justify-content:center;
    transition:transform .25s;
  }
  .scroll-down:hover{transform:translateY(6px); border-color:#8cbf46;}
  .scroll-down .mouse{
    width:18px;height:28px;border-radius:12px;border:2px solid rgba(255,255,255,0.6);
    position:absolute;margin-top:-2px;
  }
  .scroll-down .arrow{display:block;position:relative;margin-top:0px;opacity:0.95;font-size:18px}
  
  /* Section common */
  .section{padding:64px 0}
  .section-title{
    text-align:left;
    color:var(--green-dark);
    margin:0 0 28px 0;
    font-size:48px;
    font-weight:700;
  }
  
  /* ABOUT - two column */
  .two-col{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
  .about .col-left h2{color:var(--green-light);font-size:48px;margin-bottom:12px;margin-top:0;}
  .link-card{
    display:block;
    background:#187c7f;
    color:#fff;
    padding:22px;
    border-radius:12px;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
  }
  .link-card img {
    width: 45%;
    max-width: 190px;
    float: left;
    /* top: -45px; */
    position: relative;
    margin: 0 20px 20px 0;
    box-shadow: 0px 5px 5px #179b5e7a;
    top: 0;
    transition: top 1.2s cubic-bezier(.25, .8, .25, 1);
  }
  .link-card:hover img {
    top: -45px;
  
  }
  .link-card h3{margin:0 0 8px 0;color:#fff}
  .link-card p{opacity:.95}
  .link-card .cta{display:inline-block;margin-top:8px;font-weight:700;color:var(--green-light)}
  
  /* TIMELINE */
  .timeline-section {
    background: #e3e9eb;
  }
  .timeline{
    position:relative;
    padding:20px 0 40px 0;
  }
  .timeline:before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:4px;
    top:0;
    bottom:0;
    background:linear-gradient(#fff,#fff);
  }
  .timeline-item{
    display:flex;
    width:100%;
    margin:36px 0;
    align-items:flex-start;
    gap:20px;
    position:relative;
  }
  .timeline-item .timeline-card{
    background:#fff;
    padding:25px; /*18px*/
    border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,0.03);
    max-width:520px;
    /*border-left:6px solid transparent*/;
  }
  .timeline-item.left{justify-content:flex-end; padding-right:10%}
  .timeline-item.right{justify-content:flex-start; padding-left:10%}
  .timeline-item.left .timeline-card{order:1;text-align:right}
  .timeline-item.right .timeline-card{order:2;text-align:left}
  .timeline-item h4 {
    margin-bottom: 0px;
}
  .timeline-item p {
    margin-top: 0px;
}
.timeline-section a {
  color: var(--green-light);
  border-bottom: 1px dotted var(--green-light);
  padding-bottom: 1px;
}  
.timeline-section a:hover {
  border-bottom: 1px solid var(--green-light);
}  
  /* badges at center line */
  .badge{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:110px;height:56px;border-radius:28px;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;color:#fff;
    background:#8a8a8a;
    z-index:3;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    font-size: 24px;
  }
  .badge.small{width:92px;height:44px;border-radius:22px}
  .badge.green{background:var(--green-dark)}
  .badge.lightgreen{background:var(--green-light)}
  .badge.blue{background:var(--blue)}
  .badge.orange{background:var(--orange)}
  
  /* MEMBERS grid */
  .members-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    align-items:center;
  }
  .member-card{
    display:flex;align-items:center;justify-content:center;
    height:110px;background:#fff;border-radius:40px;
    /*box-shadow:0 6px 16px rgba(0,0,0,0.04);*/
    text-decoration:none;color:var(--text);
  }
  .member-card img{
    border-radius:40px;
    transition: all 0.3s ease-in-out;
    /*box-shadow:0 6px 16px rgba(0,0,0,0.04);*/
  }
  .member-card:hover img{
    box-shadow:0 6px 16px rgba(0,0,0,0.04);
    scale: 0.9;
  }
  .member-logo{font-weight:700;opacity:.7}
  
  /* DOCS - 3:9 layout */
  .docs-section {
    color: #ffffff;
    background: linear-gradient(0deg, rgba(140, 191, 70, 0.85), rgba(140, 191, 70, 0.85)), url(assets/book_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 100%;
  } 
  .docs-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    align-items:center;
  }
  .docs-left h2{color:#ffffff;margin:0 0 8px 0;font-size:48px;}
  .doc-row{
    display:flex;gap:30px;flex-wrap:wrap;justify-content:flex-start;
  }
  .doc-thumb{display:block;width:150px;height:200px;border-radius:8px;overflow:hidden;text-decoration:none}
  .doc-thumb-auto{display:block;width:auto;height:200px;border-radius:8px;overflow:hidden;text-decoration:none}
  .doc-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
  
  /* ACTIVITIES grid */
  .activities-section {
    background: #04461F;
    color: #ffffff;
  }
  .activities-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-top:18px;
  }
  .activities-section h2{color:#FFFFFF;font-size:48px;}
  .activities-section a {
    color:#8cbf46;
    padding-bottom: 1px;
    border-bottom: 1px dotted #8cbf46;
  }
  .activities-section a:hover {
    border-bottom: 1px solid #8cbf46;
  }
  .activity-card{
    display:flex;align-items:center;justify-content:center;height:110px;border-radius:60px;background:#fff;color:#fff;text-decoration:none;
    box-shadow:0 6px 16px rgba(0,0,0,0.06);
  }
  .activity-card img {
    border-radius:60px;
    box-shadow: 0px 5px 5px #179b5e7a;
  }
  .activity-logo{font-weight:700}
  
  /* Footer */
  .site-footer{background:#15301B;color:#fff;padding:24px 0;text-align:center;}
  .site-footer p{margin:0;opacity: 0.5;transition: all 0.3s ease-in-out;}
  .site-footer:hover p{opacity: 1;}
  .site-footer a {color:#FFF; border-bottom: 1px dotted white; padding-bottom: 1px;}
  .site-footer a:hover {border-bottom: 1px solid white;}
  
  /* RESPONSIVE RULES */
  @media(min-width:900px){
    .two-col{grid-template-columns:1fr 460px}
    .members-grid{grid-template-columns:repeat(6,1fr)}
    .activities-grid{grid-template-columns:repeat(4,1fr)}
    .docs-grid{grid-template-columns:360px 1fr;align-items:start}
    .doc-row{justify-content:flex-start}
    .hero h1{font-size:70px}
    .main-nav a{color:white}
    .header-inner{padding:28px 24px;}
    .timeline-item.left{padding-right:8%}
    .timeline-item.right{padding-left:8%}
    .badge{width:140px;height:70px;border-radius:35px}
  }
  
  /* large desktop - simulate 1440 with ~100px margins */
  @media(min-width:1400px){
    .container{max-width:1240px}
    /**body{background:#f8f8f8}**/
  }

  @media(max-width:1440px){
    .logo-bio.small {
        left: 2vw;
    }
    .hero {
        height: 500px;
    }
  }

  /* MOBILE: hide desktop nav, show hamburger; nav becomes dropdown */
  @media(max-width:899px){
    .main-nav{display:none}
    .hamburger{display:block}
    .main-nav.open{
      display:block;
      position:absolute;
      right:24px;
      top:70px;
      background:rgba(0,0,0,0.85);
      padding:18px;
      border-radius:10px;
    }
    .main-nav.open ul{flex-direction:column;gap:12px}
    .members-grid{grid-template-columns:repeat(3,1fr)}
    .activities-grid{grid-template-columns:repeat(2,1fr)}
    .badge{left:50%}
    .timeline:before{left:8px;transform:none;width:3px}
    .timeline-item{flex-direction:column;align-items:flex-start;padding-left:36px;margin:28px 0}
    .timeline-item .timeline-card{text-align:left}
    .timeline-item .badge{position:absolute;left:0;transform:none}
  }
  
  /* small devices */
  @media(max-width:600px){
    .hero{height:420px}
    .hero h1{font-size:28px}
    .two-col{grid-template-columns:1fr;gap:18px}
    .members-grid{grid-template-columns:repeat(2,1fr)}
    .docs-left{margin-bottom:12px}
    .doc-thumb{width:110px;height:140px}
    .logo-placeholder{width:72px;height:72px}
    .logo-placeholder.small{width:42px;height:42px}
    .activities-grid{grid-template-columns:repeat(2,1fr)}
  }

  /* ------------------------
     Fade-in utility classes
     ------------------------ */
  .fade-in{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .fade-in.visible{opacity:1; transform:translateY(0);}