@font-face {
  font-family: "Geoform";
  src: url("./fonts/geoform/Geoform-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geoform";
  src: url("./fonts/geoform/Geoform-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geoform";
  src: url("./fonts/geoform/Geoform.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geoform";
  src: url("./fonts/geoform/Geoform-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#000;
  --fg:#fff;
  --muted:#bdbdbd;
  --green:#39ff14;
  --grey:#2a2a2a;
  --shade:rgba(0,0,0,.72);

  /* course categories */
  --cat-green:#39ff14;   /* tech */
  --cat-yellow:#FFD84D;  /* writing/theory */
  --cat-pink:#FF3FA6;    /* tinkering/building */
  --cat-grey:#2a2a2a;
  --cat-blue:#3A7BFF;    /* painting/drawing */
  --tile-gap:48px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--fg);

  font-family: "Geoform", sans-serif;
  font-weight: 400;

  padding:60px 80px;
  line-height:1.8;
}

/* VIDEO BACKGROUND */
.video-bg{ position:fixed; inset:0; z-index:-2; pointer-events:none; background:#000; }
#ytbg{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100vw; height:56.25vw;
  min-height:100vh; min-width:177.78vh;
}
.shade{ position:fixed; inset:0; z-index:-1; background:var(--shade); }

/* LAYOUT */
.container{ max-width:1200px; }

h1{
  font-family: "Geoform", sans-serif;
  font-weight: 200;  /* or 300 if you prefer */
  font-size: 3.1rem;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.mark{
  background: var(--green);
  color: #000;
  padding: 6px 14px;
  font-weight: 200;
}

.nowrap{ white-space:nowrap; }

.sub{
  font-size:1.05rem;
  color:var(--muted);
  margin-bottom:26px;
  white-space:nowrap;
}

/* TABS MENU */
.tabs{
  position:sticky;
  top:36px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:54px;
  z-index:10;
}

.tabs a{
  background:var(--grey);
  color:var(--fg);
  padding:8px 14px;
  text-decoration:none;
  font-size:1.05rem;

  font-family:"Geoform", sans-serif;
  font-weight:300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tabs a.active{
  background:var(--green);
  color:#000;

  font-family:"Geoform", sans-serif;
  font-weight:400;      /* not 800 */
  letter-spacing:-0.01em;
}

.tabs a:hover{ background:#444; }

/* SECTIONS */
section{
  min-height:95vh;
  scroll-margin-top:120px;
  padding-bottom:120px;
}

.text{
  max-width:100%;
 /* max-width:820px;*/
  font-size:1.05rem;
  color:var(--muted);
  margin-top:12px;
}

/* PANELS */
.panel{
  margin-top:18px;
  padding:16px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
}

.panel-title{
  font-family: "Geoform", sans-serif;
  font-weight: 300;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  color: var(--fg);
  margin-bottom: 10px;
}

/* PRICES BLOCK */
.prices{
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  white-space: pre-wrap;
  font-size: 1.05rem;
  color: var(--fg);
}

/* =========================
   TOP SECTION — TYPOGRAPHY
========================= */

#top .text > * + * {
  margin-top: 1.4rem;   /* base vertical rhythm */
}

#top .text h2 {
  margin-top: 3.5rem;   /* stronger separation for section break */
  font-weight: 400;
  color: var(--fg);
}

#top .text h3 {
  margin-top: 2.2rem;
  font-weight: 400;
  color: var(--fg);
}

/*#top .text p {
  max-width: 820px;
}*/

#top .text{
  max-width:100%;
}
/* =========================
   PROGRAM – TABLE VERSION
========================= */

/* =========================
   PROGRAM – TABLE VERSION
========================= */

:root{
  --sched-free: #2a2a2a;   /* free-time grey (independent from site grey) */
}

/* wrapper */
#program .panel{
  overflow-x:auto;
}

/* table base */
#program table{
  border-collapse:collapse;
  min-width:1600px;
  font-family:"Geoform", sans-serif;
  font-size:11px;
  line-height:1.15;
}

/* all cells */
#program th,
#program td{
  padding:4px 6px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  border:1px solid #000; /* DEBUG – remove later */
}

/* header rows */
#program thead td{
  position:sticky;
  top:0;
  background:rgba(0,0,0,.65);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:0.08em;
  z-index:5;
}

#program thead tr:nth-child(2) td{
  font-weight:300;
  font-size:10px;
  color:var(--muted);
  letter-spacing:0.06em;
}

/* sticky time column */
#program tbody td:first-child{
  position:sticky;
  left:0;
  background:rgba(0,0,0,.75);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
  z-index:4;
}

/* top-left corner cell */
#program thead td:first-child{
  left:0;
  z-index:6;
}

/* prevent overflow breaking layout */
#program td{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* subtle empty cells */
#program td:empty{
  background:rgba(255,255,255,.02);
}

/* =========================
   PROGRAM – CELL COLORS ONLY
========================= */

/* Arrive */
#program td.s5{
  background:rgba(255,255,255,.15);
  color:var(--fg);
  font-weight:400;
}

.program-rhythm{
  margin-top: 60px;
}

#program .program-rhythm h2{
  font-weight: 700;
  margin-top: 48px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

#program .program-rhythm h3{
  font-weight: 300;
  font-style: italic;
  margin-top: -6px;
  margin-bottom: 24px;
  color: var(--muted);
}

#program .program-rhythm p{
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Breakfast / Lunch / Dinner */
#program td.s6,
#program td.s9{
  background:var(--green);
  color:#000;
  font-weight:400;
}

/* Course sessions */
#program td.s11{
  background:var(--cat-blue);
  color:#000;
  font-weight:400;
}

/* Common Discussions */
#program td.s18{
  background:#00d2d2;
  color:#000;
  font-weight:400;
}

/* Excursion Vienna */
#program td.s17,
#program td.s12{
  background:#ff9a00;
  color:#000;
  font-weight:400;
}

/* Hike Rax */
#program td.s8,
#program td.s21,
#program td.s22{
  background:#fff200;
  color:#000;
  font-weight:400;
}

/* Italy */
#program td.s10{
  background:#ff7a00;
  color:#000;
  font-weight:400;
}

/* Depart */
#program td.s14{
  background:#bdbdbd;
  color:#000;
  font-weight:400;
}

/* Evening specials */
#program td.s24{
  background:#ff9a00;
  color:#000;
  font-weight:400;
}

/* Free time */
#program td.s16{
  background:var(--sched-free);
  color:var(--muted);
}

/* =========================
   ABOUT – GREEN FRAME
========================= */

#about .text{
  background: rgba(0,0,0,.45);   /* same as .panel */
  max-width: 100%;
  border: 2px solid var(--green); /* neon green border */
  padding: 36px;
}

#about h2{
  font-weight: 700;
  margin-top: 56px;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

#about h3{
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 32px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.95rem;
}

#about p{
  font-weight: 300;
  line-height: 1.8;
}

#about a{
  color: var(--green);
  text-decoration: underline;
}

.keydata{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 48px;
  margin-top:10px;
}

.keydata__item{
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.18);
}

.keydata__label{
  color:var(--fg);
  font-weight:800;
  margin-bottom:10px;
}

.keydata__value{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
}

@media (max-width:700px){
  body{ padding:40px 22px; }
  h1{ font-size:2.1rem; } /* slightly smaller */
  .sub{ white-space:normal; }
  section{ scroll-margin-top:150px; }
}

/* =========================
   PEOPLE (easy: layout only)
========================= */

.people-intro{
  width: 100%;
  margin-top: 6px;
  padding: 0 14px; /* aligns with card content padding */
}

.people-hero{
  margin: 6px 0 10px 0;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--fg);
}

.people-description{
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}

/* grid */

.people-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}

@media (max-width: 1200px){
  .people-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
  .people-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .people-grid{ grid-template-columns: 1fr; }
}

/* card */

.person-card{
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  overflow: hidden;
}

/* image */

.person-media{
  margin: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}

.person-img{
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

@media (max-width: 600px){
  .person-media,
  .person-img{
    height: 120px;
  }
}

/* text */

.person-title{
  margin: 0;
  padding: 12px 14px 0 14px;
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--fg);
}

.person-country{
  color: var(--muted);
  font-weight: 300;
}

.person-field{
  margin: 0;
  padding: 6px 14px 0 14px;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--fg);
}

.person-inst{
  margin: 0;
  padding: 4px 14px 14px 14px;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--muted);
}

.people-disclaimer{
  margin-top: 18px;
  padding: 0 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* =========================
   BOOKING UI 
========================= */

.picker{ margin-top: 16px; }

.picker-label{
  color: var(--fg);
  font-weight: 300;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.row{ display:flex; gap:10px; flex-wrap:wrap; }
.row.col{ flex-direction:column; align-items:flex-start; }

.opt{
  background: var(--grey);
  color: var(--fg);
  border: 0;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.opt:hover{ background:#444; }

.opt.active{
  background: var(--green);
  color:#000;
  font-weight: 400;
}

.opt.wide{
  width: 100%;
  text-align: left;
  display:flex;
  justify-content: space-between;
  align-items: baseline;
}

.meta{
  color: var(--muted);
  font-size: 0.85rem;
  margin-left: 10px;
  letter-spacing: 0.02em;
}

.total{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.total-amount{
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--fg);
}

.total-line{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.btn{
  display:inline-block;
  background: var(--green);
  color:#000;
  padding: 9px 12px;
  text-decoration:none;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.btn:hover{ filter: brightness(0.95); }

.btn.ghost{
  background: var(--grey);
  color: var(--fg);
  font-weight: 300;
}

.btn.ghost:hover{ background:#444; }

.inline{
  color: var(--fg);
  text-decoration: underline;
}

.fine{
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* payment button disabled */
.btn.disabled{
  background:#444;
  color:#999;
  pointer-events:none;
  font-weight:300;
}


/* =========================
   COURSES GRID
========================= */

.course-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--tile-gap);
  margin-top:24px;
}

@media (max-width:920px){
  .course-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
}

.course-tile{
  display:block;
  text-decoration:none;
  border:5px solid var(--cat-green); /* overridden by category classes */
  background:transparent;
  transition:transform 160ms ease, filter 160ms ease;
}

.course-tile:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

.course-media{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
}

.course-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(0.92) contrast(1.05) saturate(0.95);
}

.course-strip{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px 18px 14px;
  background:var(--cat-green); /* overridden */
  color:#000;                  /* overridden */
}

.course-title{
  font-family: "Geoform", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.1;
}

.course-teacher{
  margin-top:6px;
  font-weight:600;
  font-size:clamp(0.9rem, 1vw, 1.05rem);
  line-height:1.1;
  opacity:0.95;
}

/* category mappings */
.cat-green{ border-color:var(--cat-green); }
.cat-green .course-strip{ background:var(--cat-green); color:#000; }

.cat-yellow{ border-color:var(--cat-yellow); }
.cat-yellow .course-strip{ background:var(--cat-yellow); color:#000; }

.cat-pink{ border-color:var(--cat-pink); }
.cat-pink .course-strip{ background:var(--cat-pink); color:#000; }

.cat-grey{ border-color:var(--cat-grey); }
.cat-grey .course-strip{ background:var(--cat-grey); color:#fff; }


/* =========================
   FAQ (Geoform 200 / 300 / 400 / 700 only)
========================= */

.faq-block{
  margin-top: 24px;
  background: rgba(0,0,0,.45);
  border: 2px solid var(--green);
  padding: 36px;
}

.faq-group{
  margin-top: 36px;
}

.faq-group-title{
  font-weight: 300;          /* Light */
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.faq-question{
  font-weight: 700;          /* Bold */
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: 22px;
  margin-bottom: 6px;
  color: var(--fg);
}

.faq-answer{
  font-weight: 300;          /* Light */
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
  color: var(--fg);
  max-width: 980px;
}

/* contact image */

#contact .text{
  margin-top: 24px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.25);
  padding: 36px;
}

.contact-image{
  margin-bottom: 28px;
}

.contact-image img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

#contact a{
  color: var(--green);
  text-decoration: underline;
}

#contact a:visited{
  color: var(--green);
}

@media (max-width: 700px){
  .contact-image img{
    height: 220px;
  }
}