:root{
  --page-bg:#0f0f10;
  --ink:#ffffff;
  --ink-soft:#e9e9ea;
  --accent:#ffffff;
  --maxw:1200px;
  --gap: clamp(16px, 2vw, 24px);
  --hero-min-h: clamp(520px, 72vh, 860px);
  --overlay: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.85) 100%);
}

/* small reset */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--page-bg); color:var(--ink);
  font: 16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
img{ max-width:100%; display:block; }

.container{ width: min(100% - 32px, var(--maxw)); margin-inline:auto; }

/* HERO */
.hero{
  position: relative;
  min-height: var(--hero-min-h);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-align:center;
  isolation:isolate;
  overflow:hidden;
  padding-bottom: 5px;   /* some space below */
}

@media (max-width: 600px) {
  .hero {
    min-height: 80vh;
    padding-bottom: 20px;
  }
  .brand {
    font-size: clamp(56px, 14vw, 120px);
  }
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%),
    url("images/antti-2.jpg") center/cover no-repeat; /* kirkkaampi overlay */
  z-index:-1;
}
.brand{
  font-family:"Cinzel", serif;
  color:#fff;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.1;
  font-size: clamp(32px, 5vw, 80px);
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.brand .fn{ font-weight:400; display:block; font-size: 5rem;}
.brand .ln{ font-weight:500; display:block; font-size: 6rem;}

/* links */
.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: clamp(18px, 3vw, 28px) auto;
}
@media (max-width: 900px){
  .tiles{ grid-template-columns: 1fr; }
}
.tile{
  position:relative;
  min-height: 180px;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
  background:#111;
  outline: none;
  display:flex; /* center content */
  align-items:center;
  justify-content:center;
  text-align:center;
  isolation:isolate;
}
.tile::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 100%),
              var(--bg, #333) center/cover no-repeat;
  transition: transform .6s ease, filter .6s ease;
  will-change: transform, filter;
  z-index: -1;
}

.tile::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 50%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 30%, rgba(0,0,0,0.0) 70%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.tile:focus-visible{ box-shadow: 0 0 0 3px #fff4; }
.tile:hover::before{ transform: scale(1.06); filter: brightness(1.08); }
.tile:hover::after{ opacity: 1; }

.tile__label{
  position:relative;
  display:flex; flex-direction:column; gap:6px;
  align-items:center; justify-content:center;
  color:#fff;
  text-transform:uppercase;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.03em;
  font-size: clamp(22px, 3.6vw, 36px);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
  transform: translateY(0) scale(1);
  transition: transform .35s ease, letter-spacing .35s ease, text-shadow .35s ease, opacity .35s ease;
  padding: 16px;
  z-index: 1;
}
.tile:hover .tile__label{
  transform: translateY(-2px) scale(1.03);
  letter-spacing: .05em;
  text-shadow: 0 6px 20px rgba(0,0,0,.55);
}
.tile__label small{
  font-weight:800; opacity:.95; font-size:.55em; letter-spacing:.06em;
}
/* Disabled look + Coming badge for tiles */
.tile__label--disabled{ color: #b8b8be; opacity:.9; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.tile__badge{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size: clamp(11px, 1.6vw, 13px);
  text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 12px rgba(255,255,255,.35);
  z-index: 1; opacity:.96;
}

@media (prefers-reduced-motion: reduce){
  .tile::before,
  .tile::after,
  .tile:hover::before,
  .tile:hover::after,
  .tile__label,
  .tile:hover .tile__label{
    transition: none !important;
    transform: none !important;
  }
}

/* content block */
.content{
  background:#fff;
  color:#111;
  border-radius: 20px 20px 0 0;
  margin-top: clamp(28px, 4vw, 42px);
  padding: clamp(24px, 3vw, 40px);
  min-height: 50vh; /* tilaa “kaikelle muulle” */
}
.content h2{
  margin:0 0 .5em; font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing:.02em;
}
.content p{ max-width: 62ch; }

/* EVENT CARDS */
.events {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 2em;
}
.event-card {
  background: #ffffff;
  color: #1f2937; /* slate-800 */
  border-radius: 14px;
  border: 1px solid #f2f2f3;
  box-shadow: 0 4px 16px rgba(17,24,39,.06);
  padding: 0.9em 1.1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 56px;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
  gap: 1em;
}
.event-card:hover {
  box-shadow: 0 8px 24px rgba(17,24,39,.10);
  transform: translateY(-1px);
}
/* New wrapper to group date + place */
.event-header{
  display:flex;
  align-items:center;
  gap: 12px;
  width: 100%;
}
.event-date {
  font-size: 0.95em;
  font-weight: 700;
  color: #be123c; /* rose-700 */
  background: #ffe4e6; /* rose-100 */
  border: 1px solid #fecdd3; /* rose-200 */
  border-radius: 999px;
  padding: 0.35em 0.9em;
  letter-spacing: .02em;
  margin-bottom: 0;
  flex-shrink: 0;
}
.event-place {
  font-size: 1rem;
  font-weight: 600;
  color: #111827; /* gray-900 */
  letter-spacing: .005em;
  margin-bottom: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-btn {
  display: inline-block;
  background: linear-gradient(90deg, #ff7aa2 0%, #ff4d6d 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.45em 1.1em;
  border-radius: 10px;
  font-size: 1em;
  box-shadow: 0 6px 14px rgba(255,77,109,.25);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  margin-left: 1em;
  white-space: nowrap;
}
.event-btn:hover, .event-btn:focus {
  background: linear-gradient(90deg, #ff4d6d 0%, #ff7aa2 100%);
  box-shadow: 0 10px 22px rgba(255,77,109,.30);
  transform: translateY(-1px);
}
.event-btn--disabled {
  background: #f3f4f6; /* gray-100 */
  color: #9ca3af; /* gray-400 */
  border: 1px solid #e5e7eb; /* gray-200 */
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
  margin-left: 1em;
  white-space: nowrap;
}

/* FOOTER */
footer{
  border-top: 1px solid #ffffff22;
  padding: clamp(24px, 3vw, 40px) 0;
  color:#d6d6d8;
  background: #0b0b0c;
  margin-top: clamp(32px, 4vw, 56px);
}
.footer-grid{
  display:flex;
  flex-direction: column;
  gap: var(--gap);
  align-items:center;
  text-align:center;
}
.logos{
  display:flex; gap: clamp(16px, 3vw, 28px); align-items:center; flex-wrap:wrap; justify-content:center;
  filter: grayscale(1) contrast(1.1) brightness(1.2);
}
.logos img{
  height: 80px; width:auto; opacity:.95;
}
.legal{ font-size: 14px; opacity:.85; }
 a.tile{ text-decoration: none; color: inherit; }

/* Mobile optimizations for event list */
@media (max-width: 640px) {
  .events { gap: 12px; }
  .event-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0.85em 0.9em;
  }
  /* Mobile header: no colored bar, just text */
  .event-header{
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 10px;
    color: inherit;
  }
  .event-header .event-date{
    background: transparent;
    border: 0;
    color: #111827;
    padding: 0;
    border-radius: 0;
    font-weight: 800;
    letter-spacing: .02em;
    flex-shrink: 0;
  }
  .event-header .event-place{
    color:#111827;
    font-weight: 700;
    white-space: normal; /* allow wrapping on mobile */
  }
  .event-date {
    font-size: 0.9em;
    padding: 0.3em 0.8em;
  }
  .event-place {
    font-size: 0.95rem;
    white-space: normal; /* allow wrapping on mobile */
  }
  .event-btn, .event-btn--disabled {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: 4px;
    padding: 0.7em 1em;
    font-size: 0.95em;
    border-radius: 12px;
  }
}