/* Rotary Club Budapest City — production stylesheet.
   Ported from the design handoff prototype (design_handoff_club_website/club-website.html).
   Design is deliberately squared: no border-radius, no box-shadow anywhere. */

:root{
  --blue:#17458F;--blue-deep:#17458F;--ink:#0A1F3A;
  --gold:#F7A81B;--gold-soft:#F7A81B;--gold-dark:#a06500;
  --paper:#FAF7F2;--paper-2:#F0EBE0;--white:#fff;
  --muted:#5C6B82;--nav-h:68px;
  --eyebrow-offset: clamp(2px, 0.35vw, 6px);
  --hero-eyebrow-offset: clamp(4px, 0.7vw, 11px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
button{cursor:pointer;font:inherit;}
.muted-65{color:rgba(255,255,255,0.65);}

/* ====== ACCESSIBILITY ====== */
.skip-link{
  position:absolute;left:12px;top:-48px;z-index:2000;
  background:var(--gold);color:var(--blue-deep);
  font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;
  padding:10px 16px;transition:top .15s;
}
.skip-link:focus{top:12px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
.section-ink :focus-visible,.hero :focus-visible,.pg-hero :focus-visible,.cta-strip :focus-visible,#site-nav :focus-visible,footer :focus-visible{
  outline-color:var(--gold-soft);
}

/* ====== NAV ====== */
#site-nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:var(--blue-deep);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;z-index:1000;
  border-bottom:2px solid var(--gold);
}
.nav-logo{
  font-family:'Source Serif 4',serif;font-weight:500;font-size:20px;
  color:var(--white);letter-spacing:-0.01em;flex-shrink:0;
}
.nav-logo em{color:var(--gold);font-style:normal;}
/* display:contents keeps #nav-links and .lang-pill as direct flex children
   of #site-nav on desktop (space-between across 3 items, matching the
   prototype exactly); only at the mobile breakpoint does this become a real
   box (the dropdown panel). */
.nav-main{display:contents;}
#nav-links{display:flex;gap:28px;align-items:center;}
/* Muted-white alphas below stay ≥0.65: on the club blue that's the floor
   for WCAG AA 4.5:1 at these small text sizes. */
#nav-links a{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);transition:color .15s;
}
#nav-links a:hover,#nav-links a.active{color:var(--gold);}
.lang-pill{display:flex;border:1px solid rgba(247,168,27,0.45);}
.lang-pill a{
  display:block;background:none;border:none;padding:7px 14px;
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);transition:all .15s;
}
.lang-pill a:hover{color:var(--gold-soft);}
.lang-pill a.active{background:var(--gold);color:var(--blue-deep);}
.lang-pill a.active:hover{color:var(--blue-deep);}

/* Mobile nav toggle (hamburger) — hidden on desktop */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:32px;height:32px;background:none;border:none;padding:0;margin-left:16px;
}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--white);transition:transform .18s,opacity .18s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ====== LAYOUT ====== */
main{padding-top:var(--nav-h);min-height:100vh;}
.section{padding:88px 88px;}
.section-white{background:var(--white);}
.section-paper{background:var(--paper);}
.section-paper2{background:var(--paper-2);}
.section-blue{background:var(--blue);color:var(--white);}
.section-ink{background:var(--blue);color:var(--white);}

/* ====== TYPE ====== */
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);
  margin-bottom:16px;
  padding-left:var(--eyebrow-offset);
}
.eyebrow.inv{color:var(--gold-soft);}
.sec-title{
  font-family:'Source Serif 4',serif;font-weight:380;
  font-size:clamp(32px,3.6vw,54px);letter-spacing:-0.015em;line-height:1.1;
  color:var(--blue-deep);margin-bottom:20px;
}
.sec-title.inv{color:var(--white);}
.sec-body{font-size:17px;line-height:1.7;color:#2e3d58;max-width:620px;}
.sec-body.inv{color:rgba(255,255,255,0.7);}
.gold-rule{width:56px;height:2px;background:var(--gold);margin-bottom:28px;}

/* ====== HERO ====== */
.hero{
  background:var(--blue-deep);
  min-height:calc(100vh - var(--nav-h));
  padding:100px 88px 80px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,transparent,transparent 64px,
    rgba(247,168,27,0.035) 64px,rgba(247,168,27,0.035) 65px);
}
.hero::after{
  /* -90px lifts the circle from the hero's vertical center up to the
     headline's center (measured on both EN and HU homepages), so the logo
     reads as a counterpart to the h1 rather than floating near the CTAs. */
  content:'';position:absolute;right:40px;top:calc(50% - 90px);transform:translateY(-50%);
  width:560px;height:560px;border-radius:50%;
  border:1px solid rgba(247,168,27,0.12);
  background:url('/assets/images/logo.png') center/68% no-repeat;
}
.hero-inner{position:relative;z-index:1;max-width:840px;}
.hero-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);
  margin-bottom:36px;
  padding-left:var(--hero-eyebrow-offset);
}
.hero h1{
  font-family:'Source Serif 4',serif;font-weight:340;
  font-size:clamp(52px,6.5vw,100px);
  /* 1.1 (not the prototype's 1.0): Hungarian diacritics (ő, á) on one line
     visibly collide with descenders (g, y) of the line above at 1.0. */
  line-height:1.1;letter-spacing:-0.025em;color:var(--white);
  margin-bottom:36px;
}
.hero h1 em{font-style:italic;color:var(--gold-soft);}
/* Only while the logo circle is shown (it's hidden below 1321px): make the
   headline wrap before it reaches the circle's footprint (560px circle +
   40px offset + gap). No effect from ~1466px up, where the .hero-inner
   840px cap is narrower anyway. Measured against the longest (HU) h1. */
@media(min-width:1321px){
  .hero h1{max-width:calc(100vw - 625px);}
}
.hero-sub{font-size:18px;line-height:1.65;color:rgba(255,255,255,0.65);max-width:500px;margin-bottom:52px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-aside{
  position:absolute;bottom:60px;right:88px;text-align:right;z-index:1;
}
.hero-aside .k{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.hero-aside .v{font-family:'Source Serif 4',serif;font-size:20px;color:rgba(255,255,255,0.75);line-height:1.4;}

/* ====== PAGE HERO ====== */
.pg-hero{
  background:var(--blue-deep);padding:72px 88px 64px;
  position:relative;overflow:hidden;
}
.pg-hero::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,transparent,transparent 64px,
    rgba(247,168,27,0.035) 64px,rgba(247,168,27,0.035) 65px);
}
.pg-hero::after{
  content:'';position:absolute;right:40px;top:50%;transform:translateY(-50%);
  width:260px;height:260px;border-radius:50%;
  border:1px solid rgba(247,168,27,0.12);
  background:url('/assets/images/logo.png') center/68% no-repeat;
}
.pg-hero .eyebrow{position:relative;z-index:1;}
.pg-hero h2{
  font-family:'Source Serif 4',serif;font-weight:340;
  font-size:clamp(36px,4.5vw,66px);color:var(--white);
  /* 1.1 for the same reason as .hero h1 — Hungarian accents vs descenders. */
  letter-spacing:-0.015em;line-height:1.1;position:relative;z-index:1;
  /* 380px reserves the logo circle's footprint (40px offset + 260px circle
     + breathing room) so the longest titles wrap instead of running under
     it; resolves to the plain 760px cap once the viewport is wide enough. */
  max-width:min(760px,calc(100vw - 380px));
}

/* ====== BUTTONS ====== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.22em;text-transform:uppercase;
  padding:15px 32px;border:none;transition:all .18s;
}
.btn-gold{background:var(--gold);color:var(--blue-deep);}
.btn-gold:hover{background:var(--gold-soft);}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.36);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.btn-blue{background:var(--blue);color:var(--white);}
.btn-blue:hover{background:var(--blue-deep);}
.btn-white{background:var(--white);color:var(--blue);}
.btn-white:hover{background:var(--paper);}
.btn-multiline{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px 24px;}
.btn-multiline span{white-space:nowrap;}
.btn-multiline span:first-child{font-size:14px;opacity:0.85;letter-spacing:0.15em;text-transform:uppercase;}
.btn:disabled{opacity:0.6;cursor:not-allowed;}

/* ====== CARDS ====== */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px;margin-top:52px;}
.card{
  background:var(--white);padding:44px 38px;
  border:1px solid rgba(23,69,143,0.1);
  display:flex;flex-direction:column;
}
.card-tag{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.card-h{
  font-family:'Source Serif 4',serif;font-weight:500;
  font-size:24px;line-height:1.2;color:var(--blue-deep);margin-bottom:14px;
}
.card-p{font-size:14px;line-height:1.65;color:#3a4a66;flex-grow:1;margin-bottom:28px;}
.card-link{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;transition:color .15s;
  background:none;border:none;padding:0;
}
.card-link::after{content:'→';}
.card-link:hover{color:var(--gold);}

/* ====== CTA STRIP ====== */
.cta-strip{
  background:var(--blue);padding:72px 88px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  flex-wrap:wrap;
}
.cta-strip h3{
  font-family:'Source Serif 4',serif;font-weight:340;
  font-size:clamp(26px,3vw,44px);color:var(--white);letter-spacing:-0.01em;max-width:580px;
}
.cta-strip h3 em{color:var(--gold-soft);font-style:italic;}
.cta-strip-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.cta-strip-side p{color:rgba(255,255,255,0.62);font-size:16px;max-width:300px;}

/* ====== TWO-COL ====== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.two-col-lg{display:grid;grid-template-columns:5fr 4fr;gap:80px;align-items:start;}

/* ====== ABOUT VALUES ====== */
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:48px;}
.val-card{
  background:rgba(255,255,255,0.07);padding:40px 36px;
  border:1px solid rgba(247,168,27,0.18);
}
.val-title{
  font-family:'Source Serif 4',serif;font-size:22px;font-weight:500;
  color:var(--white);margin-bottom:10px;
}
.val-body{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.58);}

/* ====== BOARD ====== */
.board-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.board-year{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:0.18em;color:var(--gold-dark);}

/* ====== TEAM ====== */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px;margin-top:52px;}
.team-card{background:var(--white);border:1px solid rgba(23,69,143,0.1);}
.team-card .img-ph{width:100%;aspect-ratio:3/4;}
.team-info{padding:24px 26px 28px;}
.team-role{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px;
}
.team-name{font-family:'Source Serif 4',serif;font-weight:500;font-size:20px;color:var(--blue-deep);margin-bottom:4px;}
.team-meta{font-size:14px;color:var(--muted);}

/* ====== GALLERY ====== */
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:52px;
}
.gallery-grid .img-ph{width:100%;aspect-ratio:4/3;}

/* ====== NEWS ====== */
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:52px;}
.news-card{background:var(--white);border:1px solid rgba(23,69,143,0.1);display:flex;flex-direction:column;}
.news-card .img-ph{width:100%;aspect-ratio:16/9;}
.news-body{padding:36px 32px;flex-grow:1;display:flex;flex-direction:column;}
.news-date{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:10px;
}
.news-h{
  font-family:'Source Serif 4',serif;font-weight:500;
  font-size:22px;line-height:1.2;color:var(--blue-deep);margin-bottom:12px;
}
.news-p{font-size:14px;line-height:1.65;color:#3a4a66;flex-grow:1;margin-bottom:20px;}

/* ====== IMAGE PLACEHOLDER ======
   Stands in for real photography (see /images/README.txt). Replace the
   containing element with a plain <img> once the club supplies real assets —
   keep the same aspect-ratio so surrounding grids don't reflow. */
.img-ph{
  width:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--paper-2);border:1px dashed rgba(23,69,143,0.28);
  padding:16px;
}
.img-ph.ar-4-3{aspect-ratio:4/3;}
.img-ph.ar-3-4{aspect-ratio:3/4;}
.img-ph.ar-16-9{aspect-ratio:16/9;}
.img-ph span{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
  line-height:1.5;
}
.section-ink .img-ph,.hero .img-ph{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.22);}
.section-ink .img-ph span,.hero .img-ph span{color:rgba(255,255,255,0.5);}

/* ====== EVENTS ====== */
.event-list{margin-top:40px;display:grid;gap:0;}
.event-row{
  display:grid;grid-template-columns:80px 1fr;gap:28px;
  padding:26px 0;border-top:1px solid rgba(23,69,143,0.12);align-items:start;
}
.event-row:last-child{border-bottom:1px solid rgba(23,69,143,0.12);}
.ev-date-day{
  font-family:'Source Serif 4',serif;font-style:italic;
  font-size:38px;font-weight:300;color:var(--gold);line-height:1;
}
.ev-date-mo{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
}
.ev-title{
  font-family:'Source Serif 4',serif;font-weight:500;
  font-size:20px;color:var(--blue-deep);margin-bottom:4px;
}
.ev-meta{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:0.1em;color:var(--muted);}

/* ====== CALENDAR PLACEHOLDER ====== */
.cal-placeholder{
  background:var(--paper-2);border:1px solid rgba(23,69,143,0.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:20px;margin-top:48px;padding:64px;min-height:420px;
}
.cal-icon{
  width:56px;height:60px;border:2px solid var(--blue);overflow:hidden;display:flex;flex-direction:column;
}
.cal-icon-top{background:var(--blue);height:18px;flex-shrink:0;}
.cal-icon-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;}
.cal-icon-grid div{background:rgba(23,69,143,0.18);}
.cal-note{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
  max-width:400px;line-height:1.9;
}

/* ====== FORMS ====== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;max-width:680px;}
.form-grid.form-grid-1{grid-template-columns:1fr;margin-top:24px;max-width:100%;}
.form-grid .full{grid-column:1/-1;}
.fg{display:flex;flex-direction:column;gap:7px;}
.fg label{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--blue);
}
.fg input,.fg textarea,.fg select{
  border:1px solid rgba(23,69,143,0.28);background:var(--white);
  padding:13px 15px;font-family:'Inter',sans-serif;font-size:15px;
  color:var(--ink);outline:none;transition:border-color .15s;
}
.fg input:focus,.fg textarea:focus{border-color:var(--blue);}
.fg input:invalid:not(:placeholder-shown){border-color:#b3261e;}
.fg textarea{resize:vertical;min-height:110px;}
.fg textarea.tall{min-height:150px;}
.form-status{
  margin-top:20px;padding:16px 20px;border-left:3px solid var(--gold);background:var(--paper);
  font-size:14px;line-height:1.6;max-width:680px;display:none;
}
.form-status.is-visible{display:block;}
.form-status.is-err{border-left-color:#b3261e;}
.form-status a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}

/* ====== JOIN STEPS ====== */
.join-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:52px;}
.join-step{background:var(--white);padding:44px 34px;border:1px solid rgba(23,69,143,0.1);}
.join-num{
  font-family:'Source Serif 4',serif;font-style:italic;font-weight:300;
  font-size:60px;color:var(--gold);line-height:1;margin-bottom:20px;
}
.join-h{font-family:'Source Serif 4',serif;font-weight:500;font-size:20px;color:var(--blue-deep);margin-bottom:10px;}
.join-p{font-size:14px;line-height:1.6;color:#3a4a66;}

/* ====== CONTACT ====== */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.cinfo-item{margin-bottom:36px;}
.cinfo-label{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;
}
.cinfo-val{font-family:'Source Serif 4',serif;font-size:20px;color:var(--blue-deep);line-height:1.4;}
.cinfo-val a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.cinfo-val a:hover{color:var(--gold);}
.map-ph{
  background:var(--paper-2);border:1px solid rgba(23,69,143,0.14);
  height:260px;display:flex;align-items:center;justify-content:center;
  margin-top:36px;
}
.map-ph span{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;
}

/* ====== QUOTE BLOCK ====== */
.quote-block{
  padding:40px 44px;background:var(--paper);
  border-left:3px solid var(--gold);margin-top:36px;
}
.quote-label{
  font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.quote-text{
  font-family:'Source Serif 4',serif;font-style:italic;
  font-size:28px;color:var(--blue-deep);line-height:1.25;
}

/* ====== FOOTER ====== */
footer{
  background:var(--blue);color:rgba(255,255,255,0.65);
  padding:72px 88px 44px;
}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:40px 56px;
  padding-bottom:48px;margin-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand h3{
  font-family:'Source Serif 4',serif;font-weight:500;font-size:20px;
  color:var(--white);margin-bottom:12px;
}
.footer-brand h3 em{color:var(--gold);font-style:normal;}
.footer-brand p{font-size:14px;line-height:1.7;max-width:280px;margin-bottom:24px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:14px;
  color:rgba(255,255,255,0.65);transition:all .15s;
}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);}
.footer-col h4{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.footer-col ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;}
.footer-col ul li a{font-size:14px;color:rgba(255,255,255,0.65);transition:color .15s;}
.footer-col ul li a:hover{color:var(--gold);}
.footer-col address{font-style:normal;font-size:14px;line-height:1.8;}
.footer-col address a{color:rgba(255,255,255,0.75);text-decoration:underline;text-underline-offset:2px;}
.footer-col address a:hover{color:var(--gold);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.14em;color:rgba(255,255,255,0.65);
  flex-wrap:wrap;gap:12px;
}

/* ====== TRANSITIONS ====== */
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  main #content-fade{animation:fadein .28s ease;}
}

/* ====== RESPONSIVE ====== */
/* On desktop widths up to 1520px (especially on the Hungarian version which
   has longer link names), the menu links can overlap the logo or push the
   language selector off screen. Tighter styling fixes this transition zone. */
@media(min-width:1321px) and (max-width:1520px){
  #site-nav{padding:0 24px;}
  #nav-links{gap:16px;}
  #nav-links a{font-size:13px;letter-spacing:0.15em;}
  .lang-pill a{padding:6px 12px;font-size:13px;letter-spacing:0.12em;}
}

/* The full nav row (logo + 9 links + EN/HU pill, longest of EN/HU measured)
   needs ~1272px before it fits without overlapping — verified by measuring
   rendered content width, not guessed. 1320px gives a safety margin. This is
   its own breakpoint (wider than the 960px one below) because the overlap
   starts well above typical tablet/small-laptop widths, not just on phones. */
@media(max-width:1320px){
  .nav-toggle{display:flex;}
  .nav-main{
    position:absolute;top:100%;left:0;right:0;
    background:var(--blue-deep);border-bottom:2px solid var(--gold);
    flex-direction:column;align-items:stretch;gap:0;
    display:none;
  }
  .nav-main.is-open{display:flex;}
  #nav-links{flex-direction:column;align-items:stretch;gap:0;}
  #nav-links a{padding:16px 24px;font-size:14px;border-top:1px solid rgba(255,255,255,0.08);}
  /* align-self overrides .nav-main's align-items:stretch -- without it the
     bordered pill stretches to the dropdown's full width while the EN/HU
     buttons inside stay content-sized, leaving a big empty bordered gap. */
  .lang-pill{align-self:flex-start;margin:16px 24px 20px;}
  /* The homepage hero headline (max-width 840px + 88px padding) and the
     560px logo circle need ~1500px to coexist; below the desktop-nav
     breakpoint the logo overlaps the h1/subtitle, so it's desktop-only. */
  .hero::after{display:none;}
}
@media(max-width:960px){
  #site-nav{padding:0 24px;}
  .section,.hero,.pg-hero,.cta-strip{padding-left:32px;padding-right:32px;}
  .hero{padding:72px 32px 60px;padding-bottom:40px;}
  .pg-hero{padding:56px 32px 48px;}
  .cta-strip{padding:56px 32px;}
  footer{padding:56px 32px 36px;}
  .two-col,.contact-layout,.news-grid{grid-template-columns:1fr;}
  .join-steps{grid-template-columns:1fr 1fr;}
  .footer-top{flex-direction:column;align-items:stretch;}
  /* The prototype floats the meeting box bottom-right over the hero at a
     fixed offset, which collides with the CTAs once the fluid h1 wraps to
     3+ lines (measured overlapping up to ~660px, tight well past that).
     Drop it into normal flow below the CTAs for the whole tablet range. */
  .hero-aside{position:static;text-align:left;margin-top:40px;}
  /* Below this width the inner-page logo is hidden, so the h2 no longer
     needs to reserve space for it — back to the plain cap. */
  .pg-hero::after{display:none;}
  .pg-hero h2{max-width:760px;}
}
@media(max-width:600px){
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .join-steps{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{justify-content:center;text-align:center;}
}
/* Wide-but-short windows (phone landscape, tiny browser windows) pass the
   width checks above yet the vertically-centered logo ring still overlaps
   the hero text — key this one off height instead of width. */
@media(max-height:500px){
  .hero::after,.pg-hero::after{display:none;}
}

/* ====== GALLERY VIEWER LIGHTBOX ====== */
.gallery-grid img.img-real {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-grid img.img-real:hover {
  transform: scale(1.02);
  filter: brightness(0.95);
}

.gallery-viewer {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}
.gallery-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-viewer::backdrop {
  background-color: rgba(14, 44, 94, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
}

.viewer-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
}

.viewer-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 80vw;
  max-height: 80vh;
  position: relative;
}

.viewer-image-container img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.viewer-caption {
  margin-top: 16px;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.viewer-counter {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-transform: uppercase;
}

.viewer-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s ease, transform 0.2s ease;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewer-close:hover {
  color: #ffffff;
  transform: scale(1.1);
}

.viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.viewer-nav svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}
.viewer-nav:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.05);
}
.viewer-nav.prev {
  left: 32px;
}
.viewer-nav.next {
  right: 32px;
}

@media (max-width: 768px) {
  .viewer-content {
    padding: 16px;
  }
  .viewer-nav {
    width: 44px;
    height: 44px;
  }
  .viewer-nav.prev {
    left: 8px;
  }
  .viewer-nav.next {
    right: 8px;
  }
  .viewer-image-container {
    max-width: 90vw;
  }
}

/* ====== ABOUT PAGE SINGLE COLUMN CENTERED ====== */
.about-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-content .gold-rule {
  margin: 0 auto 28px;
}
.about-content .quote-block {
  text-align: center;
  border-left: none;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 36px 24px;
  margin-top: 0;
  margin-bottom: 40px;
  width: 100%;
}