/* style.css - improved responsive layout aiming to reproduce Wix-like look */

/* Reset & base */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html,body { height:100%; margin:0; font-family: "Helvetica Neue", Arial, sans-serif; color:#222; background:#fff; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* Container used inside sections */
.container { width:90%; max-width:1100px; margin:0 auto; }

/* Header / Navbar */
header.header { background: rgba(255,255,255,0.96); position:sticky; top:0; z-index:50; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; }
.header-title { font-size:1.35rem; font-weight:700; letter-spacing:0.2px; }
.navbar { }
.navbar ul{ display:flex; gap:18px; align-items:center; margin:0; padding:0; list-style:none; }
.navbar a{ display:inline-block; padding:8px 10px; color:#333; font-weight:600; border-radius:6px; }
.navbar a:hover{ background:rgba(204,51,102,0.06); color:#cc3366; }

/* Hero */
.hero { position:relative; min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; color:white; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45)); z-index:1; }
.hero .hero-inner{ position:relative; z-index:2; padding:40px 20px; }
.hero h2{ font-size:2.6rem; margin:0 0 10px; line-height:1.02; }
.hero p{ margin:0 0 18px; font-size:1.05rem; opacity:0.95; }
.btn{ display:inline-block; background:#cc3366; color:white; padding:10px 20px; border-radius:28px; font-weight:700; box-shadow:0 6px 18px rgba(204,51,102,0.16); }
.btn:active{ transform:translateY(1px); }
.hero .hero-inner .meta { margin-top:8px; font-size:0.95rem; opacity:0.95; }

/* Sections */
.section{ padding:56px 0; }
.section.alt{ background:#f8f7f9; }
.section h2{ text-align:center; margin:0 0 22px; font-size:1.6rem; color:#222; }
.section p, .section li{ color:#444; font-size:1rem; max-width:82ch; margin:0 auto 10px; text-align:center; }

/* Programme list */
.section ul.program{ max-width:700px; margin:0 auto; padding:0; list-style:none; display:grid; gap:10px; }
.section ul.program li{ background:white; border:1px solid rgba(0,0,0,0.04); padding:14px 18px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,0.03); text-align:left; font-weight:600; }

/* Gallery */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:stretch; }
.gallery img{ width:100%; height:220px; object-fit:cover; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.08); }

/* Contact callout */
.callout { display:flex; align-items:center; justify-content:space-between; gap:18px; background:linear-gradient(90deg, #fff, #fff); padding:22px; border-radius:12px; border:1px solid rgba(0,0,0,0.04); max-width:900px; margin:0 auto; }
.callout .left{ flex:1; }
.callout .right{ flex:0 0 auto; }
.callout p{ margin:0; font-weight:600; }

/* Footer */
.footer{ background:#111; color:#eee; padding:20px 0; text-align:center; font-size:0.95rem; }

/* Image gallery fallback (from the simplified file) */
.image-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; padding:18px 0; }
.image-gallery img{ width:100%; height:200px; object-fit:cover; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12); }

/* Utility */
.center{ text-align:center; }
.small{ font-size:0.9rem; opacity:0.9; }

/* Responsive behavior */
@media (max-width:1024px){
  .hero h2{ font-size:2.2rem; }
  .gallery img{ height:180px; }
  .header-title{ font-size:1.15rem; }
}

@media (max-width:768px){
  .header-inner{ padding:12px 0; }
  .navbar ul{ gap:10px; flex-wrap:wrap; justify-content:center; }
  .hero{ min-height:44vh; padding:40px 0; }
  .hero h2{ font-size:1.6rem; }
  .hero p{ font-size:0.95rem; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery img{ height:150px; }
  .section{ padding:36px 0; }
  .callout{ flex-direction:column; align-items:center; text-align:center; }
}

@media (max-width:420px){
  .gallery{ grid-template-columns:1fr; }
  .image-gallery img{ height:180px; }
  .hero h2{ font-size:1.4rem; }
  .hero p{ font-size:0.95rem; }
  .header-title{ font-size:1rem; }
}