/* ================================================================
   KRASOKORČULIARSKY KLUB ZVOLEN — stylesheet (css.css)
   Same folder as index.html, linked there as href="css.css"

   Contents:
   1. Design tokens (colors, radius)
   2. Base/reset
   3. Header + nav
   4. Hero + CTA buttons + hover glitter + skate-trail signature
   5. Generic section/heading rules
   6. About
   7. Trainers
   8. Activities
   9. Why Us (5 cards)
   10. Napísali o nás / Press
   11. Sign Up
   12. Gallery (11 real photos)
   13. Testimonials
   14. Footer
   15. Responsive breakpoints
   ================================================================ */

/* ---------- 1. DESIGN TOKENS ----------
   Locked palette: deep icy blue as primary, soft off-white background
   (easy on the eyes for scrolling), navy/charcoal text, coral used
   ONLY as a small accent (mainly in the button hover glitter). */
:root{
  --ice-deep:#1B7A9E;   /* primary icy blue */
  --ice-mid:#3FA9CC;    /* secondary/gradient blue */
  --ice-pale:#EAF5F8;   /* light icy tint for alternating section backgrounds */
  --bg:#F3F8FA;         /* main off-white background */
  --ink:#16232E;        /* main text color (navy/charcoal) */
  --ink-soft:#4A5A66;   /* secondary/paragraph text */
  --coral:#FF7A59;      /* warm accent — used sparingly */
  --white:#FFFFFF;
  --radius:18px;        /* shared corner radius for cards */
}

/* ---------- 2. BASE / RESET ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;} /* smooth-scrolls to sections when nav links are clicked */
body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3, .display{
  font-family:'Quicksand', sans-serif; /* rounded, friendly heading font */
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ice-deep);
}

/* Scroll offset: keeps the sticky header from covering the top of a
   section when a nav link jumps to it. Increased further on small
   screens where the header wraps to two lines (see breakpoints). */
#about, #trainers, #activities, #why, #press, #signup, #gallery, #footer{
  scroll-margin-top:104px;
}

/* ---------- 3. HEADER + NAV ----------
   Single page, no subpages -> nav links are just in-page anchors.
   No hamburger menu: on narrow screens the nav becomes a small
   horizontally-scrollable strip instead of hiding behind a toggle. */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(243,248,250,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(27,122,158,0.12);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 24px;
  max-width:1180px; margin:0 auto;
}
.brand-logos{
  display:flex; align-items:center; gap:16px; flex-shrink:0;
}
.brand-logos img{height:68px; width:auto;} /* enlarged per customer request */
.brand-logos .divider{width:1px; height:46px; background:rgba(22,35,46,0.15);}

nav{
  flex:1; min-width:0;
  overflow-x:auto;                 /* lets the link row scroll instead of wrapping/hiding */
  -ms-overflow-style:none; scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none;} /* hide scrollbar visually, still scrollable */
nav ul{
  display:flex; gap:18px; list-style:none; white-space:nowrap;
  justify-content:flex-end;
}
nav a{
  font-weight:600; font-size:0.86rem; color:var(--ink);
  position:relative; padding:4px 0; cursor:pointer;
}
nav a::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--ice-deep);
  transition:width .25s ease;
}
nav a:hover::after{width:100%;}

/* language toggle button (SK <-> EN), logic lives in script.js */
#lang-toggle{
  flex-shrink:0;
  font-family:'Inter', sans-serif; font-weight:700; font-size:0.82rem;
  border:2px solid var(--ice-deep); color:var(--ice-deep);
  background:transparent; border-radius:100px;
  padding:8px 16px; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
#lang-toggle:hover{background:var(--ice-deep); color:#fff;}

/* ---------- 4. HERO + CTA + GLITTER + SKATE TRAIL ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #DCF0F6 0%, var(--bg) 100%);
  padding:88px 0 120px;
}
.hero-inner{
  max-width:1180px; margin:0 auto; padding:0 24px;
  position:relative; z-index:2; text-align:center;
}
.hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  margin:18px auto 20px; max-width:820px; line-height:1.12;
}
.hero h1 span{color:var(--ice-deep);}
.hero p.lead{
  font-size:1.1rem; color:var(--ink-soft); max-width:560px; margin:0 auto 34px;
}

/* Primary CTA button — icy-blue gradient (coral was moved OUT of the
   button fill per customer request, it now only shows in the glitter). */
.cta{
  position:relative; display:inline-block;
  background:linear-gradient(135deg, var(--ice-deep), var(--ice-mid));
  color:#fff; font-weight:700; font-size:1rem;
  padding:15px 34px; border-radius:100px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(27,122,158,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(27,122,158,0.5);}
/* diagonal shine sweep on hover */
.cta::before{
  content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.9), transparent);
  transform:skewX(-20deg); transition:left .65s ease; z-index:1;
}
.cta:hover::before{left:130%;}

/* Secondary "ghost" CTA — outlined, no fill */
.cta.ghost{
  background:transparent; color:var(--ice-deep);
  border:2px solid var(--ice-deep); box-shadow:none; margin-left:14px;
}
.cta.ghost::before{display:none;}
.cta.ghost:hover{background:var(--ice-deep); color:#fff;}

/* Glitter/sparkle burst on hover: small ❄ / ✦ characters placed inside
   the button in index.html, each with its own position + delay. Most
   are white/icy; a couple are coral so the accent color stays "a
   little" visible, as requested, without covering the whole button. */
.spark{
  position:absolute; font-size:11px; line-height:1; color:#fff;
  opacity:0; pointer-events:none; z-index:2; transform:scale(0);
}
.spark.coral{color:var(--coral);}
.cta:hover .spark{animation:twinkle 900ms ease forwards;}
@keyframes twinkle{
  0%{opacity:0; transform:scale(0) rotate(0deg);}
  35%{opacity:1; transform:scale(1.15) rotate(20deg);}
  100%{opacity:0; transform:scale(0.4) rotate(40deg);}
}

/* Signature decorative element: a thin curved line ("skate trail")
   with a small glint gliding along it, echoing a blade carving the ice. */
.skate-trail{position:absolute; left:0; right:0; bottom:-2px; width:100%; height:140px; z-index:1;}
.trail-glint{
  offset-path: path('M -50 90 C 250 20, 500 160, 780 60 S 1250 10, 1500 90');
  animation: glide 7s linear infinite;
}
@keyframes glide{
  0%{ offset-distance:0%; opacity:0;} 5%{opacity:1;} 95%{opacity:1;}
  100%{ offset-distance:100%; opacity:0;}
}
.snowflake{position:absolute; color:var(--ice-mid); opacity:0.35; animation:drift 9s ease-in-out infinite;}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-14px) rotate(20deg);}}

/* ---------- 5. GENERIC SECTION / HEADING RULES ---------- */
section{padding:96px 0;}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-top:10px;}
.section-head p{color:var(--ink-soft); margin-top:14px;}

/* ---------- 6. ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.about-text .eyebrow{margin-bottom:10px;}
.about-text h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:18px;}
.about-text p{color:var(--ink-soft); margin-bottom:16px;}
.ice-illustration{
  background:var(--ice-pale); border-radius:var(--radius);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  /* no fixed aspect-ratio here on purpose: the customer photo is a tall
     portrait image, so the box follows the image's own proportions
     instead of forcing it into a landscape frame (which used to crop
     the top/bottom off). If a wide/landscape photo replaces it later,
     consider adding back an aspect-ratio matching THAT image's shape. */
}
/* Real customer photo shown in full, uncropped, scaled to fit its column width */
.ice-illustration img{
  width:100%; height:auto; display:block; border-radius:var(--radius);
}

/* ---------- 7. TRAINERS ---------- */
.trainers-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  max-width:900px; margin:0 auto;
}
.trainer-card{
  background:var(--white); border-radius:var(--radius); padding:30px 26px;
  border:1px solid rgba(27,122,158,0.08); box-shadow:0 6px 20px rgba(22,35,46,0.06);
  display:flex; gap:18px; align-items:flex-start;
}
/* Round photo slot for each trainer. Shows a neutral silhouette until a
   real photo exists; the <img> sits on top and covers it. If the photo
   file is missing, index.html hides the broken <img> so the silhouette
   stays visible. Photos go in assets/img/trainers/trainer-1.jpg ... -4.jpg */
.trainer-avatar{
  width:88px; height:88px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:var(--ice-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233FA9CC'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E") center 60% / 62% no-repeat;
  border:2px solid rgba(27,122,158,0.15);
}
.trainer-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.trainer-card h3{font-size:1.02rem; margin-bottom:2px;}
.trainer-card .role{font-size:0.82rem; color:var(--ice-deep); font-weight:600; margin-bottom:8px;}
.trainer-card p{font-size:0.9rem; color:var(--ink-soft);}
/* Note under the trainer grid flagging draft role titles pending customer confirmation */
.trainers-note{
  max-width:820px; margin:22px auto 0; text-align:center;
  font-size:0.85rem; color:var(--ink-soft); font-style:italic;
}

/* ---------- 8. ACTIVITIES ----------
   Two large cards: the club runs exactly two activities (open course /
   club athlete prep). Text is long, so padding/line-height are roomy. */
.age-badge{
  display:inline-block; margin-top:14px;
  background:var(--white); border:1px solid rgba(27,122,158,0.2);
  color:var(--ice-deep); font-weight:600; font-size:0.85rem;
  padding:8px 18px; border-radius:100px;
}
.activities-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  max-width:980px; margin:0 auto; align-items:start;
}
.activity-card{
  background:var(--white); border-radius:var(--radius); padding:34px 28px;
  box-shadow:0 6px 20px rgba(22,35,46,0.06); border:1px solid rgba(27,122,158,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.activity-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(22,35,46,0.1);}
.activity-card .badge{
  width:52px; height:52px; border-radius:14px; background:var(--ice-pale);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  margin-bottom:18px;
}
.activity-card h3{font-size:1.2rem; margin-bottom:10px;}
.activity-card p{font-size:0.95rem; color:var(--ink-soft); line-height:1.7;}

/* ---------- 9. WHY US ---------- (5 cards) */
.why{background:var(--ice-deep); color:#fff; border-radius:28px; margin:0 24px;}
.why .wrap{padding:80px 24px;}
.why .section-head h2{color:#fff;}
.why .section-head p{color:rgba(255,255,255,0.8);}
.why-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:22px; margin-top:20px;}
.why-item{text-align:center;}
.why-item .icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center;
}
.why-item h3{font-size:0.98rem; color:#fff; margin-bottom:6px;}
.why-item p{font-size:0.85rem; color:rgba(255,255,255,0.75);}

/* ---------- 10. NAPÍSALI O NÁS / PRESS ----------
   New section added under Why Us: a grid of link-cards, each opening
   a real external article in a new tab. */
.press-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;
  max-width:980px; margin:0 auto;
}
.press-card{
  display:flex; flex-direction:column; gap:8px;
  background:var(--white); border-radius:var(--radius); padding:22px 24px;
  border:1px solid rgba(27,122,158,0.08); box-shadow:0 6px 20px rgba(22,35,46,0.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.press-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(22,35,46,0.1);
  border-color:rgba(27,122,158,0.25);
}
.press-source{
  font-size:0.74rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ice-mid);
}
.press-title{
  font-family:'Quicksand', sans-serif; font-weight:700; font-size:1rem; color:var(--ink);
  line-height:1.4;
}
.press-link{
  font-size:0.85rem; font-weight:600; color:var(--ice-deep); margin-top:4px;
}

/* ---------- 11. SIGN UP ----------
   Enrollment happens by email or phone (no online form for this
   version) — one centered card with two contact buttons. */
.signup-card{
  max-width:760px; margin:0 auto; text-align:center;
  background:var(--ice-pale); border-radius:24px; padding:56px 40px;
}
.signup-card p.lead{color:var(--ink-soft); max-width:520px; margin:0 auto 32px;}
.signup-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.signup-btn{
  display:flex; align-items:center; gap:10px;
  background:var(--white); border:2px solid var(--ice-deep); color:var(--ice-deep);
  padding:14px 26px; border-radius:100px; font-weight:700; font-size:0.95rem;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.signup-btn:hover{background:var(--ice-deep); color:#fff; transform:translateY(-2px);}
.signup-btn .ic{font-size:1.1rem;}

/* ---------- 12. GALLERY ----------
   11 real photos, uniform responsive tiles (no fixed spans, since a
   fixed layout designed for 6 tiles doesn't divide evenly into 11).
   Each tile crops to a consistent square-ish shape via object-fit,
   so mismatched photo shapes/orientations still line up cleanly. */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows:200px;
  gap:14px;
}
.gallery-grid img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:14px;
  transition:transform .3s ease;
}
.gallery-grid img:hover{transform:scale(1.03);}

/* ---------- 13. TESTIMONIALS ---------- */
.testimonials-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.testimonial{background:var(--white); border-radius:var(--radius); padding:28px; border:1px solid rgba(27,122,158,0.08);}
.testimonial p{color:var(--ink-soft); font-size:0.95rem; margin-bottom:16px;}
.testimonial .who{font-weight:700; font-size:0.9rem; font-family:'Quicksand', sans-serif; color:var(--ice-deep);}

/* ---------- 14. FOOTER ----------
   "Otváracie hodiny" column removed per customer request.
   Columns: about+social | contact | legal/company details.
   Partner logos strip at the very bottom. */
footer{background:var(--ink); color:#fff; margin-top:40px;}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding:72px 0 48px;}
.footer-top h4{font-family:'Quicksand', sans-serif; font-size:1rem; margin-bottom:18px; color:#fff;}
.footer-top p, .footer-top li{color:rgba(255,255,255,0.68); font-size:0.9rem; margin-bottom:8px; list-style:none;}
.footer-top a{color:rgba(255,255,255,0.68); transition:color .2s;}
.footer-top a:hover{color:var(--ice-mid);}
.social-row{display:flex; gap:12px; margin-top:16px;}
.social-row a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; font-size:0.8rem;
}
.social-row a:hover{background:var(--ice-mid); color:var(--ink);}
.partners{
  border-top:1px solid rgba(255,255,255,0.1); padding:32px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.partners .label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.5);}
.partner-logos{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.partner-logos img{height:44px; width:auto; background:#fff; padding:6px 10px; border-radius:10px;}
.bottom-bar{border-top:1px solid rgba(255,255,255,0.08); padding:20px 0; text-align:center; font-size:0.82rem; color:rgba(255,255,255,0.45);}

/* ---------- 15. RESPONSIVE BREAKPOINTS ----------
   Adaptive layout for tablet and phone widths, per project brief:
   the site must adapt to any device width. No hamburger menu is
   introduced at any breakpoint — nav simply becomes a scrollable
   strip on narrow screens (see nav rules in section 3). */
@media (max-width: 1024px){
  .why-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width: 900px){
  .about-grid{grid-template-columns:1fr; gap:32px;}
  .gallery-grid{grid-template-columns:repeat(2, 1fr);}
  .testimonials-grid{grid-template-columns:1fr;}
  .trainers-grid{grid-template-columns:1fr;}
  .activities-grid{grid-template-columns:1fr;}
  .press-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr; gap:32px;}
  .brand-logos img{height:52px;}
  /* header wraps to two lines on tablet/phone, so sections need more offset */
  #about, #trainers, #activities, #why, #press, #signup, #gallery, #footer{scroll-margin-top:150px;}
}
@media (max-width: 640px){
  .why-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 560px){
  .hero{padding:64px 0 90px;}
  .cta.ghost{display:block; margin:14px auto 0; width:fit-content;}
  .header-inner{flex-wrap:wrap;}
  nav ul{justify-content:flex-start;}
  .footer-top{grid-template-columns:1fr;}
  .signup-card{padding:40px 24px;}
  .why-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:140px;}
}