/*
Theme Name: Fundacja Trail
Theme URI: https://fundacjatrail.pl
Author: Soplica Software — Kacper Rogóż (soplicasoftwaresolutions@gmail.com)
Author URI: mailto:soplicasoftwaresolutions@gmail.com
Description: Własny motyw blokowy FSE dla Fundacji Trail.
Version: 1.1.5
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: trail-fse
*/

:root {
  --trail-hero-shade: linear-gradient(180deg, rgba(7, 11, 9, 0) 0%, rgba(7, 11, 9, 0) 30%, rgba(7, 11, 9, .16) 44%, rgba(7, 11, 9, .38) 58%, rgba(7, 11, 9, .62) 78%, rgba(7, 11, 9, .82) 100%);
}

html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
a { text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--wp--preset--color--sky-500); outline-offset: 4px; }
.trail-shell { overflow: clip; }
.trail-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--wp--preset--color--ink-200); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); }
.trail-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1440px; min-height: 78px; margin: 0 auto; padding: 0 32px; }
.trail-header__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--wp--preset--color--brand); text-decoration: none; }
.trail-header__brand img { width: 190px; height: auto; }
.trail-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); }
.trail-nav a { color: var(--wp--preset--color--brand); font: 700 var(--wp--preset--font-size--label)/1 var(--wp--preset--font-family--display); letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.trail-nav a:hover { color: var(--wp--preset--color--teal-500); }
.trail-header__menu { display: none; min-height: 44px; border: 1px solid var(--wp--preset--color--brand); background: transparent; color: var(--wp--preset--color--brand); }
.trail-hero { position: relative; display: grid; width: calc(100% + 48px); max-width: none !important; min-height: calc(100svh - 78px); margin-left: -24px !important; margin-right: -24px !important; padding-left: 0 !important; padding-right: 0 !important; isolation: isolate; overflow: clip; color: #fff; background: var(--wp--preset--color--brand); }
.trail-hero__media, .trail-hero__shade { position: absolute; inset: 0; }
.trail-hero__media { width: 100% !important; max-width: none !important; height: 100%; margin: 0 !important; object-fit: cover; z-index: -2; }
.trail-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.trail-hero__shade { z-index: -1; background: var(--trail-hero-shade); }
.trail-hero__content { align-self: end; width: min(700px, calc(100% - 48px)); margin: 0 auto 8vh; animation: trail-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.trail-hero__eyebrow { margin: 0 0 16px; color: rgba(255, 255, 255, .78); font: 700 var(--wp--preset--font-size--label)/1 var(--wp--preset--font-family--display); letter-spacing: .2em; text-transform: uppercase; }
.trail-hero h1 { max-width: 12ch; margin: 0 0 20px; color: #fff; font-size: clamp(48px, 8vw, 104px); line-height: .98; }
.trail-hero__intro { max-width: 52ch; margin: 0 0 28px; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.45; }
.trail-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trail-actions a { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 12px 20px; border: 1px solid #fff; color: #fff; font: 700 var(--wp--preset--font-size--label)/1 var(--wp--preset--font-family--display); letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.trail-actions a:hover { background: #fff; color: var(--wp--preset--color--brand); }
.trail-section { position: relative; padding: clamp(64px, 10vw, 144px) 24px; }
.trail-section--paper { background: var(--wp--preset--color--ink-50); }
.trail-section--brand { background: var(--wp--preset--color--brand); color: #fff; }
.trail-section__inner { max-width: 1240px; margin: 0 auto; }
.trail-section__kicker { margin: 0 0 16px; font: 700 var(--wp--preset--font-size--label)/1 var(--wp--preset--font-family--display); letter-spacing: .18em; text-transform: uppercase; }
.trail-section h2 { max-width: 16ch; margin: 0 0 20px; font-size: clamp(36px, 6vw, 72px); }
.trail-section__lead { max-width: 60ch; font-size: clamp(17px, 2vw, 22px); }
.trail-story { position: relative; }
.trail-story__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 38vw); gap: 24px; overflow-x: auto; padding: 12px 0 28px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.trail-story__panel { min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 4vw, 48px); background: #fff; scroll-snap-align: start; }
.trail-story__panel h3 { margin: 0 0 16px; font-size: clamp(24px, 3vw, 40px); }
.trail-story__panel p { max-width: 44ch; }
.trail-story__controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.trail-story__controls button { min-width: 44px; min-height: 44px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.trail-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px); gap: 20px; overflow-x: auto; padding: 8px 0 24px; scroll-snap-type: x proximity; }
.trail-athlete-card { min-height: 280px; display: grid; align-content: end; position: relative; overflow: hidden; padding: 24px; color: #fff; background: var(--wp--preset--color--brand); scroll-snap-align: start; }
.trail-athlete-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, transparent 42%, rgba(255,255,255,.13) 42%, rgba(255,255,255,.13) 47%, transparent 47%); pointer-events: none; }
.trail-athlete-card > * { position: relative; }
.trail-athlete-card__tier { margin: 0 0 10px; font: 700 var(--wp--preset--font-size--label)/1 var(--wp--preset--font-family--display); letter-spacing: .14em; text-transform: uppercase; }
.trail-athlete-card h3 { margin: 0; color: #fff; font-size: 26px; }
.trail-athlete-card p { margin: 8px 0 0; }
.trail-footer { padding: 48px 24px; background: var(--wp--preset--color--ink-900); color: #fff; }
.trail-footer__inner { max-width: 1240px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto; }
.trail-footer a { color: #fff; }
@keyframes trail-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .trail-header__inner { min-height: 64px; padding: 0 20px; }
  .trail-header__brand img { width: 128px; }
  .trail-nav { display: none; }
  .trail-header__menu { display: inline-flex; align-items: center; padding: 8px 12px; }
  .trail-header.is-open .trail-nav { position: absolute; inset: 64px 0 auto; display: grid; gap: 0; padding: 12px 20px 20px; background: #fff; box-shadow: 0 16px 30px rgba(28,32,36,.12); }
  .trail-nav a { padding: 14px 0; }
  .trail-hero { min-height: calc(100svh - 64px); }
  .trail-hero__content { width: calc(100% - 40px); margin-bottom: 7svh; }
  .trail-hero h1 { font-size: clamp(44px, 14vw, 68px); }
  .trail-story__track { grid-auto-columns: minmax(82vw, 1fr); }
  .trail-footer__inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trail-hero__content { animation: none; }
  .trail-story__track, .trail-rail { scroll-snap-type: none; }
}