:root{
  --page-max: 1300px;
  --gap: 1rem;
  --pad: 1rem;
  --bg: #94bc44;   /* background behind the boxes */
  --fg: #222;
  --card: #ffffff;
  --border: #ddd;
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

/* Page grid */
.page {
  display: grid;
  grid-template-columns: 1fr 1fr;              /* equal widths for main and sidebar */
  grid-template-rows: auto 1fr auto;           /* header auto, middle grows, footer auto */
  grid-template-areas:
    "header header"
    "main   sidebar"
    "footer footer";
  gap: var(--gap);
  min-height: 100svh;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

/* Regions */
header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: sidebar; }
footer { grid-area: footer; }

/* Blocks */
header, main, aside > .sidebar-card, footer {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--pad);
}

/* Sidebar: top fits content, bottom fills remaining height */
aside {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--gap);
}

/* Demo-only minimums (safe to remove later) */
header  { min-height: 80px; }
main    { min-height: 300px; }
.sidebar-card { min-height: 120px; }
footer  { min-height: 80px; }

/* Responsive: stack when narrow */
@media (max-width: 800px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

/* Optional: tidy default headings/paragraphs */
h1, h2, h3, p { margin: 0 0 0.5rem; }

/* Header link (site title) */
header h1 a {
  color: inherit;
  text-decoration: none;
}
header h1 a:hover,
header h1 a:focus {
  text-decoration: underline;
}

/* Buttons (shared) */
.button-link,
.newsletter-button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #94bc44;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.2s ease-in-out;
}
.button-link:hover,
.button-link:focus,
.newsletter-button:hover,
.newsletter-button:focus {
  background: #7da337;
}

/* Highlight text that blends into background */
.highlight { color: #94bc44; }

/* Full-width main for single-column content pages */
main.fullwidth { grid-column: 1 / -1; }

/* ---------------- HEADER ---------------- */

/* Header container */
header .header-inner {
  display: flex;
  align-items: center;
  gap: 20px; /* space between logo, title, nav, button, icons */
}

/* Logo inside header */
header .logo {
  height: 50px;
  width: auto;
  display: block;
}

/* Title */
header h1 {
  margin: 0;
  font-size: 2em;
  line-height: 1.1;
  color: #222;
}

/* Nav links */
.main-nav {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;    /* push nav + button + icons to right side */
}
.main-nav a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}
.main-nav a:hover { text-decoration: underline; }

/* Newsletter button spacing */
.newsletter-button { margin: 0 8px; }   /* equal space on both sides */

/* Social icons – consolidated (for new SVG set) */
.social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;   /* smaller gap after button */
}
.social-icons a {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.social-icons img,
.social-icons svg {
  width: 24px !important;
  height: 24px !important;
  display: block;
}

/* ---------------- FOOTER (single source) ---------------- */
.page > footer {
  grid-column: 1 / -1;
  width: auto;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--pad);
  text-align: center;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.page > footer .footer-top,
.page > footer .footer-bottom {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.page > footer a {
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}
.page > footer a:hover { text-decoration: underline; }

/* ---------------- ABOUT PAGE ---------------- */

/* Intro and section cards */
.about-section {
  background: var(--card);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;     /* tighter gap */
}
.about-section h2 {
  font-size: 1.8em;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: #222;
}

/* Person card: name above, then row with image + text */
.about-card {
  background: var(--card);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  display: block;             /* keep name on its own line */
}
.about-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.25em;
  font-weight: 600;
  color: #333;
}

/* Row inside person card */
.about-profile-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Consistent square thumbnails for organiser cards (desktop) */
.about-profile-row img {
  width: 150px;
  height: 150px;           /* square */
  object-fit: cover;       /* crop to fill without distortion */
  border-radius: 6px;
  flex: 0 0 150px;
  display: block;
}

.about-profile-text p { margin: 0.5rem 0 0; }

/* Remove “double gap” between stacked boxes */
.about-section + .about-section,
.about-section + .about-card,
.about-card + .about-section,
.about-card + .about-card {
  margin-top: 0;
}

/* Mobile: stack image above text */
@media (max-width: 700px) {
  .about-profile-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .about-profile-row img {
    width: 100%;
    height: auto;
    max-width: 320px;
    margin-bottom: 0.5rem;
  }
}

/* ---------------- SPONSORS PAGE ---------------- */
.sponsor {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.sponsor:last-child { border-bottom: none; }

.sponsor-logo {
  width: 160px;
  height: 100px;           /* consistent visual height */
  object-fit: contain;     /* keep entire logo visible */
  background: #fff;
  border-radius: 6px;
  display: block;
  flex: 0 0 160px;
}
.sponsor-text { flex: 1; }

@media (max-width: 600px) {
  .sponsor {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .sponsor-logo {
    width: 220px;
    height: 120px;
    margin-bottom: 0.5rem;
  }
}

/* ---------------- SPEAKER CAROUSEL ---------------- */
.speaker-carousel {
  grid-column: 1 / -1;                 /* full width across the grid */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.speaker-carousel__title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
}

.carousel-viewport {
  position: relative;
  height: clamp(220px, 35vw, 360px);    /* responsive height */
  overflow: hidden;
  border-radius: 8px;
  background: #000;                     /* nice backdrop during load */
}

.carousel-viewport .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                     /* fill the frame */
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

.carousel-viewport .slide.active {
  opacity: 1;
}

/* Optional: gentle focus outline if we ever make it keyboard-controllable */
.carousel-viewport:focus-visible {
  outline: 2px solid #2b6cb0;
  outline-offset: 2px;
}

.featured-speaker {
  margin-top: 1.5rem;
  text-align: center;
}

.featured-speaker img {
  display: inline-block;
  
  /* Make portraits a nice size */
  max-height: 420px;   /* keeps them from being too tall */
  width: auto;         /* preserve aspect ratio */
  
  /* Give them presence in the box */
  min-height: 300px;
  
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}