/* Mesta Mastic Run — website mockup design system
   Βλ. ../../design-system.md για τους κανόνες πίσω από αυτές τις επιλογές. */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --stone:#EDE4D1;
  --stone-deep:#E2D6BE;
  --paper:#F7F2E7;
  --ink:#2A2118;
  --ink-soft:#5B4F40;
  --ink-faint:#8A7C67;
  --pine:#2F5A3C;
  --pine-deep:#21402B;
  --brick:#7A2530;
  --brick-deep:#5C1B23;
  --dusk:#4A6FA5;
  --dusk-deep:#365483;
  --amber:#C97A3D;
  --amber-deep:#A85F28;
  --line:#D8CBAE;

  --font-display:'Alegreya', Georgia, 'Times New Roman', serif;
  --font-body:'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', 'Consolas', monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --wrap:1120px;
  --radius:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 var(--sp-3);
  line-height:1.15;
  font-weight:700;
}
h1{font-size:clamp(2.4rem, 5vw, 4rem); font-weight:800}
h2{font-size:clamp(1.6rem, 3vw, 2.3rem)}
h3{font-size:1.3rem; font-weight:600}
p{margin:0 0 var(--sp-4)}
a{color:var(--dusk-deep)}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-5)}
@media (max-width:600px){ .wrap{padding:0 var(--sp-4)} }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:block;
  margin-bottom:var(--sp-2);
}

/* ---------- Brushstroke divider (signature element) ---------- */
.brush{display:block; width:100%; height:28px; overflow:visible}
.brush path{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.brush .b1{stroke:currentColor; stroke-width:10; opacity:.9}
.brush .b2{stroke:currentColor; stroke-width:5; opacity:.35}
.brush{color:var(--pine)}
.brush.brick{color:var(--brick)}
.brush.dusk{color:var(--dusk)}
.brush.ink{color:var(--ink)}

.brush-underline{display:inline-block; width:120px; height:18px; margin-top:8px}
.brush-underline path{fill:none; stroke:currentColor; stroke-width:10; stroke-linecap:round}
h2 .brush-underline, .section-head .brush-underline{color:var(--pine); display:block}
.section-head.brick .brush-underline{color:var(--brick)}
.section-head.dusk .brush-underline{color:var(--dusk)}

@media (prefers-reduced-motion: no-preference){
  .brush path{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:draw 1.1s ease forwards;
  }
  .brush-underline path{
    stroke-dasharray:120; stroke-dashoffset:120;
    animation:draw .6s ease forwards .15s;
  }
  @keyframes draw{ to{stroke-dashoffset:0} }
}

/* ---------- Header / nav ---------- */
header.site{
  background:var(--stone);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.site-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-3) 0;
  gap:var(--sp-4);
}
.brand{display:flex; align-items:center; gap:var(--sp-3); text-decoration:none}
.brand .plaque{
  display:flex; align-items:center;
}
.brand .plaque img{display:block; height:42px; width:auto}
.brand .wordmark{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.05rem; display:none}

nav.primary{display:flex; align-items:center; gap:var(--sp-5)}
nav.primary a{
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  color:var(--ink); text-decoration:none; padding:4px 2px;
  border-bottom:2px solid transparent;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{border-bottom-color:var(--brick)}

/* Hover/click sub-menu on desktop — groups a few pages under one label.
   Plain div/button (not <details>): modern Chrome renders closed <details>
   content via an internal always-hidden box that no author CSS can override,
   which breaks a pure-CSS hover reveal. */
nav.primary .nav-drop{position:relative}
nav.primary .nav-drop::after{
  /* Invisible bridge over the gap between the label and .nav-drop-panel
     (created by the panel's margin-top). Without it the mouse leaves
     .nav-drop while crossing the gap and :hover drops before it reaches
     the panel, closing the submenu. */
  content:''; position:absolute; top:100%; left:0; right:0; height:10px; z-index:29;
}
nav.primary .nav-drop-label{
  appearance:none; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  color:var(--ink); padding:4px 2px; border-bottom:2px solid transparent;
}
nav.primary .nav-drop-label::after{content:'▾'; font-size:.7em; margin-left:5px; color:var(--ink-faint)}
nav.primary .nav-drop:hover .nav-drop-label,
nav.primary .nav-drop:focus-within .nav-drop-label,
nav.primary .nav-drop:has(a[aria-current="page"]) .nav-drop-label{border-bottom-color:var(--brick)}
nav.primary .nav-drop-panel{
  position:absolute; top:100%; left:0; margin-top:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:6px; display:none; flex-direction:column; min-width:220px;
  box-shadow:0 10px 26px rgba(37,30,20,.14); z-index:30;
}
nav.primary .nav-drop-panel a{
  padding:9px 10px; border-radius:var(--radius); border-bottom:none !important;
  font-weight:600; font-size:.92rem; color:var(--ink); text-decoration:none; white-space:nowrap;
}
nav.primary .nav-drop-panel a:hover, nav.primary .nav-drop-panel a[aria-current="page"]{background:var(--line)}
@media (min-width:861px){
  nav.primary .nav-drop:hover .nav-drop-panel,
  nav.primary .nav-drop:focus-within .nav-drop-panel{display:flex}
}

details.nav-mobile{display:none}
@media (max-width:860px){
  nav.primary{display:none}
  details.nav-mobile{display:block}
  details.nav-mobile summary{
    list-style:none; cursor:pointer;
    font-family:var(--font-body); font-weight:700;
    border:1px solid var(--line); border-radius:var(--radius);
    padding:8px 14px; background:var(--paper);
  }
  details.nav-mobile summary::-webkit-details-marker{display:none}
  details.nav-mobile[open] summary{margin-bottom:var(--sp-3)}
  .nav-mobile-list{
    position:absolute; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:var(--sp-4) var(--sp-5) var(--sp-5);
    display:flex; flex-direction:column; gap:var(--sp-3);
  }
  .nav-mobile-list a{color:var(--ink); font-weight:700; text-decoration:none; font-size:1.05rem}
}

/* ---------- Hero ---------- */
.hero{position:relative; color:var(--paper); overflow:hidden}
.hero .frame{position:relative; height:62vh; min-height:420px; max-height:680px; overflow:hidden}
.hero img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 68%;
  transform:scale(1.02);
}
@media (prefers-reduced-motion: no-preference){
  .hero img.bg{animation:kenburns 26s ease-in-out infinite alternate}
}
@keyframes kenburns{ from{transform:scale(1.02)} to{transform:scale(1.11) translate(-1%,-1%)} }
.hero .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,15,10,.15) 0%, rgba(20,15,10,.55) 78%, rgba(20,15,10,.72) 100%);
}
.hero .content{
  position:absolute; left:0; right:0; bottom:0; padding:var(--sp-7) 0 var(--sp-8);
}
.hero .plaque-title{
  background:var(--paper); color:var(--ink);
  display:inline-block; padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--line); border-radius:var(--radius);
  max-width:640px;
}
.hero .plaque-title img{height:46px; margin-bottom:var(--sp-3)}
.hero h1{margin-bottom:var(--sp-2); font-size:clamp(1.9rem,4vw,2.6rem)}
.hero .lede{color:var(--ink-soft); font-size:1.05rem; margin-bottom:0}
.hero-lower-brush{position:absolute; left:0; right:0; bottom:-1px; height:34px; color:var(--stone)}

/* Scroll parallax: the photo drifts slower than the page.
   `translate` is used (not `transform`) so it composes with the ken burns scale. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .hero img.bg{
      top:-12%; bottom:auto; height:124%;
      animation-name:kenburns, heroparallax;
      animation-duration:26s, auto;
      animation-timing-function:ease-in-out, linear;
      animation-iteration-count:infinite, 1;
      animation-direction:alternate, normal;
      animation-fill-mode:none, both;
      animation-timeline:auto, view();
      animation-range:normal, cover;
    }
  }
}
@keyframes heroparallax{ from{translate:0 -9%} to{translate:0 9%} }

@media (max-width: 720px){
  /* On a narrow screen the plaque covers most of the photo, hiding the village.
     Stack instead: a short band of photo with the village centred in it, and the
     plaque below, overlapping just enough to keep the two joined. */
  .hero{color:var(--ink)}
  .hero .frame{height:40vh; min-height:220px; max-height:320px}
  .hero img.bg{object-position:50% 52%}
  .hero .scrim{background:linear-gradient(180deg, rgba(20,15,10,0) 55%, rgba(20,15,10,.28) 100%)}
  .hero .content{position:static; padding:0 0 var(--sp-6); margin-top:calc(var(--sp-5) * -1)}
  .hero .plaque-title{display:block; max-width:none; padding-top:var(--sp-5)}
  .hero .plaque-title img{margin-bottom:var(--sp-4)}
  /* keep the header logo off the screen edge */
  .brand{padding-left:var(--sp-3)}
}

/* small hero used on inner pages (no photo, just stone + brush) */
.page-head{padding:var(--sp-8) 0 var(--sp-6); border-bottom:1px solid var(--line)}
.page-head .eyebrow{color:var(--ink-faint)}

/* ---------- Buttons / CTA ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  padding:12px 22px; border-radius:var(--radius);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn.amber{background:var(--amber); color:var(--paper); border-color:var(--amber-deep)}
.btn.amber:hover{background:var(--amber-deep)}
.btn.outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.outline:hover{background:var(--ink); color:var(--paper)}
.btn.disabled{background:var(--paper); color:var(--ink-faint); border:1px dashed var(--ink-faint); cursor:not-allowed}
.btn.photos-cta{background:#fff; border-color:var(--line); box-shadow:0 2px 6px rgba(20,16,8,.18)}
.btn.photos-cta:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ---------- Sections & cards ---------- */
section{padding:var(--sp-8) 0}
section.tight{padding:var(--sp-7) 0}
section.deep{background:var(--stone-deep)}
section.ink{background:var(--ink); color:var(--stone)}
section.ink h2, section.ink h3{color:var(--stone)}
section.ink p{color:#CDBFA4}

.section-head{margin-bottom:var(--sp-6); max-width:680px}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5)}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4)}
@media (max-width:860px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .grid-3,.grid-2,.grid-4{grid-template-columns:1fr} }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-5); transition:transform .18s ease, box-shadow .18s ease;
}
@media (prefers-reduced-motion: no-preference){
  .card:hover{transform:translateY(-3px); box-shadow:0 10px 24px -14px rgba(42,33,24,.4)}
}
.card.race{border-top:5px solid var(--pine)}
.card.race.dusk{border-top-color:var(--dusk)}
.card.race.brick{border-top-color:var(--brick)}
.card .race-dist{font-family:var(--font-mono); font-size:2.1rem; color:var(--pine)}
.card.race.dusk .race-dist{color:var(--dusk)}
.card.race.brick .race-dist{color:var(--brick)}
.card .meta-list{list-style:none; margin:var(--sp-3) 0 0; padding:0; font-size:.92rem; color:var(--ink-soft)}
.card .meta-list li{padding:5px 0; border-top:1px solid var(--line)}
.card .meta-list li:first-child{border-top:none}
.card .meta-list b{color:var(--ink); font-weight:700}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
}
.badge.dot::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--pine); display:inline-block}
.badge.dusk.dot::before{background:var(--dusk)}
.badge.brick.dot::before{background:var(--brick)}

/* ---------- Gated / coming soon ---------- */
.gated{
  border:1.5px dashed var(--ink-faint); border-radius:var(--radius);
  background:var(--paper); padding:var(--sp-6);
  color:var(--ink-soft);
}
.gated .eyebrow{color:var(--ink-faint)}
.gated h3{color:var(--ink); margin-bottom:var(--sp-2)}
.gated .btn.disabled{margin-top:var(--sp-3)}

/* ---------- Timeline (πρόγραμμα — πραγματική ακολουθία) ---------- */
.timeline{list-style:none; margin:0; padding:0; border-left:3px solid var(--line); margin-left:6px}
.timeline li{position:relative; padding:0 0 var(--sp-6) var(--sp-5)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:''; position:absolute; left:-9px; top:4px; width:14px; height:14px;
  border-radius:50%; background:var(--paper); border:3px solid var(--pine);
}
.timeline li.dusk::before{border-color:var(--dusk)}
.timeline li.brick::before{border-color:var(--brick)}
.timeline .time{font-family:var(--font-mono); font-weight:600; color:var(--ink); font-size:1.1rem}

/* ---------- Stats strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5)}
@media (max-width:700px){ .stats{grid-template-columns:1fr 1fr} }
.stat{text-align:left}
.stat .n{font-family:var(--font-mono); font-size:2.4rem; color:var(--pine); display:block}
.stat .l{font-size:.88rem; color:var(--ink-soft)}

/* ---------- Table (αποτελέσματα) ---------- */
table.results{width:100%; border-collapse:collapse; font-size:.95rem}
table.results th{
  text-align:left; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); padding:8px 10px; border-bottom:2px solid var(--ink);
}
table.results td{padding:10px; border-bottom:1px solid var(--line)}
table.results td.t{font-family:var(--font-mono)}
.table-wrap{overflow-x:auto; margin-top:var(--sp-3)}
.t.muted{font-family:var(--font-mono); font-size:.9rem}

/* ---------- Βάθρο (top 3 / φύλο) ---------- */
.podium{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); margin:var(--sp-4) 0}
@media (max-width:600px){ .podium{grid-template-columns:1fr} }
.podium ol{margin:6px 0 0; padding-left:1.3em}
.podium li{padding:3px 0; display:flex; justify-content:space-between; gap:var(--sp-3)}

/* ---------- Αναδιπλούμενος πλήρης πίνακας ---------- */
.results-toggle{margin-top:var(--sp-4)}
.results-toggle summary{
  cursor:pointer; list-style:none; font-weight:700; color:var(--pine);
  padding:8px 0; font-size:.95rem;
}
.results-toggle summary::-webkit-details-marker{display:none}
.results-toggle summary::before{content:'▸ '}
.results-toggle[open] summary::before{content:'▾ '}
.results-toggle.dusk summary{color:var(--dusk)}
.results-toggle.brick summary{color:var(--brick)}

/* ---------- Forms ---------- */
form.simple{display:grid; gap:var(--sp-4); max-width:560px}
form.simple label{font-weight:700; display:block; margin-bottom:6px; font-size:.92rem}
form.simple input, form.simple select, form.simple textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); font-family:var(--font-body); font-size:1rem; color:var(--ink);
}
form.simple textarea{min-height:110px; resize:vertical}

/* ---------- Footer ---------- */
footer.site{background:var(--ink); color:#CDBFA4; padding:var(--sp-8) 0 var(--sp-6)}
footer.site a{color:#E7DCC2; text-decoration:none}
footer.site a:hover{text-decoration:underline}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:var(--sp-6)}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:700px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-grid h4{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#9C8C6E; margin:0 0 var(--sp-3)}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot-bottom{margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid #4A4030; font-size:.85rem; color:#9C8C6E; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3)}
.social-links{display:flex; flex-wrap:wrap; gap:8px}
.fb-link, .ig-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--stone)!important; padding:8px 14px; border-radius:var(--radius)}
.fb-link{background:#3B4B63}
.ig-link{background:var(--brick-deep)}

.muted{color:var(--ink-soft)}
.lead{font-size:1.15rem; color:var(--ink-soft); max-width:60ch}
.center{text-align:center}
.mt-0{margin-top:0}

/* ---------- Photo gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3)}
@media (min-width:520px){ .gallery-grid{grid-template-columns:repeat(3,1fr); gap:var(--sp-4)} }
@media (min-width:860px){ .gallery-grid{grid-template-columns:repeat(4,1fr)} }
.gallery-grid a{
  position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius); border:6px solid #fff; background:var(--stone-deep);
  box-shadow:0 2px 6px rgba(20,16,8,.18);
}
.gallery-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease}
.gallery-grid.square a{aspect-ratio:1/1}
@media (prefers-reduced-motion:no-preference){
  .gallery-grid a:hover img, .gallery-grid a:focus-visible img{transform:scale(1.06)}
}

.photo-teaser{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); margin-bottom:var(--sp-5)}
@media (min-width:600px){ .photo-teaser{grid-template-columns:repeat(4,1fr)} }
.photo-teaser img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:var(--radius); border:6px solid #fff; transition:transform .25s ease;
  box-shadow:0 2px 6px rgba(20,16,8,.18);
}
@media (prefers-reduced-motion:no-preference){
  a:hover .photo-teaser img, a:focus-visible .photo-teaser img{transform:scale(1.03)}
}
.photo-teaser.n6{grid-template-columns:repeat(3,1fr)}
@media (min-width:600px){ .photo-teaser.n6{grid-template-columns:repeat(6,1fr)} }
.photo-teaser.square img{aspect-ratio:1/1}