/* ========= Reset ========= */
/* Remove default browser margins, padding, and set consistent box-sizing for all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========= Fluid Scales & Tokens ========= */
/* CSS custom properties (variables) that scale responsively using clamp() */
/* ===== Base tokens + default sizes ===== */
:root {
  /* Spacing & radii */
  --space: clamp(12px, 2.2vw, 32px);
  --radius: clamp(14px, 2vw, 30px);

  /* Type scales → tuned for mid screens (700–1199px) */
  --logo:         clamp(32px, 6vw, 64px);
  --logo-spacing: clamp(2px, 0.8vw, 10px);
  --title:        clamp(28px, 3.8vw, 44px);   /* between mobile 30 and desktop 48 */
  --subtitle:     clamp(14px, 2.2vw, 20px);
  --subtitle2:    clamp(18px, 2.8vw, 26px);   /* mid between mobile 22 and desktop 30 */
  --time-value:   clamp(36px, 6.5vw, 60px);
  --time-label:   clamp(12px, 1.5vw, 16px);
  --details:      clamp(15px, 1.8vw, 20px);
  --details-strong: clamp(20px, 2.2vw, 26px);
  --partners-label-size: clamp(16px, 1.6vw, 22px);
  --section-title: clamp(32px, 3vw, 56px);    /* between mobile 50 and desktop 72 */

  /* Images / layout tokens */
  --jtm-logo-w: clamp(220px, 70vw, 520px);
  --org-logo-h:   clamp(160px, 4.5vw, 800px);

  /* Supporters */
  --supp-cell-h:  clamp(56px, 5.2vw, 90px);
  --supp-wide:    clamp(200px, 22vw, 320px);
  --supp-square:  var(--supp-cell-h);

  /* Lucky draw */
  --form-max-width: 720px;
  --form-embed-h:   680px;
  --form-embed-h-sm:760px;

  --logo-card-pad: clamp(8px, 1vw, 12px);
  --org-card-h:  clamp(165px, 22vw, 220px);
  /* supporters smaller */
  --supp-card-h: clamp(86px, 10vw, 118px);
}

/* ===== Mobile tweaks (<700px) ===== */
@media (max-width: 700px) {
  :root{
    --logo:       clamp(24px, 8vw, 48px);
    --title:      clamp(28px, 6.2vw, 30px);
    --subtitle:   clamp(12px, 4vw, 18px);
    --subtitle2:  clamp(9px, 4vw, 22px);
    --partners-label-size: clamp(18px, 3.8vw, 27px);
    --time-value: clamp(28px, 10vw, 44px);
    --time-label: clamp(11px, 3.2vw, 14px);
    --details: clamp(16px, 4vw, 19px);
    --details-strong: clamp(20px, 5vw, 24px);
    --section-title: clamp(42px, 5vw, 50px);
    --org-card-h: 150px;
    --supp-card-h: 110px;

  }
}

/* ===== Large desktop tweaks (≥1200px) ===== */
@media (min-width: 1200px){
  :root{
    --logo:       clamp(48px, 5vw, 90px);
    --title:      clamp(48px, 2.4vw, 48px);
    --subtitle:   clamp(16px, 1.4vw, 24px);
    --subtitle2:  clamp(20px, 2.2vw, 30px);
    --time-value: clamp(50px, 4.6vw, 80px);
    --time-label: clamp(12px, 1.1vw, 18px);
    --details: clamp(16px, 1.3vw, 22px);
    --details-strong: clamp(22px, 1.8vw, 30px);
    --partners-label-size: clamp(16px, 1.2vw, 22px);
    --section-title: clamp(60px, 2.2vw, 72px); 
  }
}


/* ========= Page ========= */
/* Body styling - creates the main background and centers content */
body{
  font-family:"Georgia", serif;

  /* keep the batik always visible (no zoom) */
  background-color:#7b2f21;
  background-image:url("media/background.png");
  background-repeat:repeat;                   /* tile instead of cover */
  background-size:clamp(600px, 45vw, 900px);  /* responsive tile size */
  background-position:top center;
  background-attachment:fixed;

  min-height:100dvh;
  display:flex; flex-direction:column;
  justify-content:flex-start; align-items:center;
  overflow:auto; position:relative;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  gap:var(--space);
}


/* Textured background overlay - creates a crosshatch pattern */
body::before {
  content: "";                                       /* Empty content required for pseudo-element */
  position: absolute;                                /* Positioned over entire body */
  inset: 0;                                         /* Shorthand for top:0, right:0, bottom:0, left:0 */
  z-index: 0;
  pointer-events: none;  /* allow clicks to pass through */
  background-image:
    /* 45-degree diagonal lines */
    repeating-linear-gradient(
      45deg, transparent, transparent 2px, rgba(139,58,58,.3) 2px, rgba(139,58,58,.3) 4px
    ),
    /* -45-degree diagonal lines (creates crosshatch) */
    repeating-linear-gradient(
      -45deg, transparent, transparent 2px, rgba(139,58,58,.3) 2px, rgba(139,58,58,.3) 4px
    );
  opacity: 0.3;                                      /* Semi-transparent overlay */
}

.container, .site-footer {
  position: relative;
  z-index: 1;            /* ensure these sit above the overlay */
}

/* ========= Card/Container ========= */
/* Main content card with glassmorphism effect */
.container {
  text-align: center;                                /* Center all text inside */
  z-index: 10;                                       /* Place above background overlay */
  width: min(92vw, 980px);                          /* Responsive width: 92% of viewport or max 980px */
  padding: clamp(12px, 4vw, 30px);                  /* Responsive padding - RESTORED */
  margin: var(--space) auto;                        /* Vertical spacing, horizontally centered */
  background: rgba(255, 255, 255, 0.08);            /* Semi-transparent white background */
  backdrop-filter: blur(10px);                      /* Blur effect for glassmorphism */
  border-radius: var(--radius);                     /* Rounded corners */
  border: 2px solid rgba(212, 175, 55, 0.3);       /* Semi-transparent gold border */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);      /* Drop shadow for depth */
}

/* Logo section spacing */
.logo-section { margin-bottom: var(--space); }

/* ========= Typography ========= */


/* Logo subtitle styling */
.logo-subtitle {
  font-size: var(--subtitle);                       /* Responsive font size */
  color: #ffd700;                                   /* Gold color */
  font-style: italic;                               /* Italicized text */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);    /* Text shadow */
  margin-bottom: var(--space);                      /* Spacing below */
}

/* Event title "A Vibrant Celebration of" */
.event-title {
  font-size: var(--title);                          /* Responsive font size */
  color: #fff;                                      /* White text */
  margin-bottom: calc(var(--space) * 0.4);         /* Spacing below */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);    /* Text shadow */
}

/* Event subtitle "Malaysian Culture and Tourism" */
.event-subtitle {
  font-size: var(--subtitle2);                      /* Responsive font size */
  color: #ffd700;                                   /* Gold color */
  margin-bottom: calc(var(--space) * 1.4);         /* Larger spacing below */
  font-style: italic;                               /* Italicized text */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);    /* Text shadow */
}

/* ========= Countdown ========= */
/* Countdown container - holds all 4 time units (days, hours, minutes, seconds) */
.countdown {
  display: flex;                                    /* Flexbox layout */
  flex-wrap: wrap;                                  /* Allow wrapping on small screens */
  justify-content: center;                          /* Center items horizontally */
  gap: clamp(12px, 3vw, 30px);                     /* Responsive spacing between items */
  margin-bottom: var(--space);                      /* Spacing below countdown */
}

/* Individual time unit box (days, hours, minutes, or seconds) */
.time-unit {
  flex: 1 1 clamp(130px, 22%, 220px);              /* Flexible sizing with min/ideal/max */
  min-width: 0;                                     /* Allows flex items to shrink below content size */
  background: rgba(255, 255, 255, 0.12);           /* Semi-transparent white background */
  backdrop-filter: blur(5px);                       /* Blur effect */
  border: 2px solid rgba(212, 175, 55, 0.4);       /* Gold border */
  border-radius: 15px;                              /* Rounded corners */
  padding: clamp(14px, 2.6vw, 25px) clamp(12px, 2vw, 20px);  /* Responsive vertical and horizontal padding */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);       /* Drop shadow */
}

/* Countdown numbers (00) */
.time-value {
  font-size: var(--time-value);                     /* Large responsive font size */
  font-weight: bold;                                /* Bold numbers */
  color: #ffd700;                                   /* Gold color */
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);    /* Strong text shadow */
  line-height: 1;                                   /* Tight line height */
  margin-bottom: clamp(6px, 1vw, 10px);            /* Spacing below number */
  display: block;                                   /* Makes it a block element */
}

/* Countdown labels (DAYS, HOURS, etc) */
.time-label {
  font-size: var(--time-label);                     /* Smaller responsive font size */
  color: #fff;                                      /* White text */
  text-transform: uppercase;                        /* ALL CAPS */
  letter-spacing: 2px;                              /* Spaced out letters */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);    /* Text shadow */
}

/* ========= Event details ========= */
/* Event details section (date, location, time) */
.event-details {
  font-size: var(--details);                        /* Responsive font size */
  color: #fff;                                      /* White text */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);    /* Text shadow */
  line-height: 1.8;                                 /* Increased line spacing for readability */
}

/* Bold text within event details (the date) */
.event-details strong {
  color: #ffd700;                                   /* Gold color */
  font-size: var(--details-strong);                /* Slightly larger font */
}

/* ========= Responsive Edges ========= */
/* Small phones - adjust countdown layout */
@media (max-width: 480px) { 
  .time-unit { flex-basis: 48%; }                   /* 2 units per row */
  .logo { letter-spacing: 2px; }                    /* Tighter letter spacing */
}

/* Landscape mode on short screens */
@media (max-height: 500px) and (orientation: landscape) {
  .container { padding: 16px; }                     /* Reduced padding */
  .countdown { gap: 10px; }                         /* Tighter gaps */
  .time-unit { padding: 12px 10px; }               /* Reduced padding */
}

/* Large desktop screens */
@media (min-width: 1600px) { 
  .container { width: min(85vw, 1200px); }         /* Larger container on big screens */
}

/* --- Journey to Malaysia logo image --- */
.jtm-logo{
  width: var(--jtm-logo-w);   /* responsive, capped by card width */
  max-width: 100%;
  height: auto;               /* keep aspect ratio */
  display: block;
  margin-inline: auto;
  object-fit: contain;
}

/* --- Divider line --- */
/* Horizontal rule with gradient effect */
.divider{
  border: 0;                                        /* Remove default border */
  height: 1px;                                      /* Thin line */
  margin: clamp(16px, 3vw, 28px) 0;                /* Vertical spacing */
  background: linear-gradient(
    90deg,                                          /* Left to right gradient */
    transparent 0%,                                 /* Transparent on edges */
    rgba(212,175,55,.25) 15%,                      /* Faint gold */
    rgba(212,175,55,.7) 50%,                       /* Bright gold in center */
    rgba(212,175,55,.25) 85%,                      /* Faint gold */
    transparent 100%                                /* Transparent on edges */
  );
}

/* --- Partners / logos strip --- */


/* Each partner group (Organised by / Supported by) */
.partners-group{
  display: grid;                                    /* Grid layout */
  grid-template-columns: 1fr;                       /* Single column */
  grid-template-areas:
    "label"                                         /* Label on top */
    "logos";                                        /* Logos below */
  row-gap: clamp(8px, 1vw, 12px);                  /* Gap between label and logos */
  align-items: start;                               /* Align items to top */
}

/* Label text ("Organised by:" / "Supported by:") */
.partners-label{
  grid-area: label;                                 /* Place in label area */
  color: #fff;                                      /* White text */
  opacity: .95;                                     /* Slightly transparent */
  font-size: var(--partners-label-size);             /* Responsive font size */
  line-height: 1.2;                                 /* Tight line height */
  white-space: nowrap;                              /* Prevent text wrapping */
  text-align: left;                                 /* Align left */
}


/*<!-------------------------------Footer area with contact details------------------------------------------------> */
/* Make footer span the full width even though body uses flex/center */
.site-footer {
  align-self: stretch;          /* important when body is display:flex */
  width: 100%;
  background: #471713;
  color: #ccc;
  border-top: 2px solid rgba(212,175,55,.35);
}

.site-footer a { text-decoration: none; }

/* Layout inside the footer */
.footer-container {
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 20px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}

.footer-note {
  font-style: italic;
  color: #aaa;
  margin: 0 0 4px 0;
  font-family: "Times New Roman", serif;
}


/* Social icons row */
.footer-social { display: flex; gap: 10px; }
.footer-social .social {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.25);
  background: rgba(255,255,255,.05);
  color: #fff;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  text-decoration: none;       /* kill underline on icon fonts */
  outline: none;
}
.footer-social .social:focus-visible {
  outline: 2px solid #ffd700;  /* accessible focus ring */
  outline-offset: 2px;
}
.footer-social .social:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  color: #ffd700;
}
.footer-social i { font-size: 18px; line-height: 1; }

/* Flip copyright & social icons on small screens */
@media (max-width: 640px) {
  .footer-container {
    display: flex;              /* switch from grid → flex */
    flex-direction: column-reverse;  /* puts social icons ABOVE the © line */
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
  }

  .footer-left { text-align: center; }
  .footer-social { justify-content: center; }
}

/* Tooltips for footer social icons */
.footer-social .social { position: relative; }

/* bubble */
.footer-social .social::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);     /* show above the icon */
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1;
  color: #eee;
  background: rgba(0,0,0,.8);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 2;
}

/* little arrow */
.footer-social .social::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,.8);
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 2;
}

/* show on hover and keyboard focus */
.footer-social .social:hover::after,
.footer-social .social:hover::before,
.footer-social .social:focus-visible::after,
.footer-social .social:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Lucky Draw section */
.lucky-draw {
  margin-top: var(--space);
  text-align: center;
  width: min(92vw, var(--form-max-width));
  margin: var(--space) auto 0; 
}
.lucky-title {
  font-size: var(--section-title);
  color: #ffd700;
  text-shadow: 2px 2px 4px rgba(0,0,0,.6);
  margin-bottom: 6px;
}
.lucky-note {
  font-size: clamp(12px, 1.6vw, 16px);
  color: #fff;
  opacity: .9;
  margin-bottom: calc(var(--space) * .8);
}

/* Frame wrapper styled like the main card */
.lucky-frame-wrap {
  width: 100%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(1px);
  border: 2px solid rgba(212,175,55,0.40);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}

/* Responsive iframe height for laptop + mobile */
.lucky-frame{
  display: block;
  width: 100%;
  height: var(--form-embed-h);
  background: rgba(0,0,0,.05);
  border: 0;
}

/* Make it taller on small screens so there’s less inner scrolling */
@media (max-width: 640px){
  .lucky-frame{ height: min(var(--form-embed-h-sm), 95vh); }
}

/* Fallback link styling */
.lucky-direct {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  color: #ffd700;
  text-decoration: none;
}
.lucky-direct:hover { text-decoration: underline; }

/* (Optional) a touch more space below event details so the form isn't cramped */
.event-details { margin-bottom: var(--space); }

/* ===== Day Schedule ===== */
.sched-title {
  font-size: var(--section-title);
  color: #ffd700; text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,.6); 
  margin-bottom: calc(var(--space) * 0.9);
}

.sched-wrap {
  position: relative;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(212,175,55,.40);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  margin-bottom: calc(var(--space) * 2);
  display:flex; flex-direction:column;
}


/* Schedule container padding */
.sched-list { position: relative; padding: 18px 16px 22px 16px; min-height:120px;}

/* Each item becomes a little card so text never feels cramped */
.sched-item {
  position: absolute; left: 10px; right: 10px;
  display: grid; grid-template-columns: 120px 1fr; gap: 12px;
  padding: 12px 14px;
  border-left: 3px solid rgba(212,175,55,.45);
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  line-height: 1.28;
}

/* Times + text */
.sched-item time {
  color: #ffd700; font-weight: 700; align-self: start;
  text-shadow: 1px 1px 2px rgba(0,0,0,.4);
}
.sched-item .what { color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.5); }

/* Smaller screens: tighten grid and font sizes a touch */
@media (max-width: 900px){
  .sched-item { grid-template-columns: 108px 1fr; gap: 10px; padding: 10px 12px; }
}
@media (max-width: 520px){
  .sched-item { grid-template-columns: 92px 1fr; padding: 10px 12px; }
  .sched-item time { font-size: 12px; }
  .sched-item .what { font-size: 14px; }
}


/* schedule stays wide */
.day-schedule { width: min(92vw, 980px); margin: calc(var(--space) * 2) auto 0; }
.day-schedule .sched-wrap { width: 100%; max-width: none; }

/* lucky draw gets a narrower container */
.lucky-draw     { width: min(92vw, var(--form-max-width)); margin: var(--space) auto 0; }
.lucky-frame-wrap { width: 100%; margin-inline: auto; }  /* keep the iframe centered inside */

@media (min-width:1600px){
  .day-schedule { width: min(85vw, 1200px); }
  /* keep lucky draw capped at your chosen --form-max-width on very large screens */
  .lucky-draw   { width: min(92vw, var(--form-max-width)); }
}

/* ===== Lucky Draw Modal ===== */
.jtm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;                   /* shown via JS */
}

.jtm-modal.is-open { display: block; }

/* half-transparent layer over the site, still showing batik */
.jtm-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(20, 8, 6, .55);
  backdrop-filter: blur(14px);
}

/* the glass card */
.jtm-modal__card{
  position: relative;
  margin: min(8vh, 64px) auto;
  width: min(92vw, 720px);
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(212,175,55,.35);
  border-radius: 16px;
  box-shadow: 0 22px 66px rgba(0,0,0,.45);
  padding: clamp(18px, 3.2vw, 28px);
  color: #fff;
  z-index: 1;
}

/* title & text */
.jtm-modal__title{
  text-align: center;
  color: #ffd700;
  font-size: clamp(20px, 2.6vw, 32px);
  text-shadow: 2px 2px 4px rgba(0,0,0,.6);
  margin-bottom: 8px;
}
.jtm-modal__desc{
  text-align: center;
  opacity: .95;
  font-size: clamp(14px, 1.6vw, 18px);
  margin-bottom: clamp(12px, 2vw, 18px);
}

/* prize grid */
.jtm-modal__prizes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
  margin-bottom: clamp(14px, 2.2vw, 20px);
}
.jtm-prize{
  text-align: center;
}
.jtm-prize img{
  display: block;
  width: 100%;
  height: clamp(140px, 22vw, 220px);
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.25);
  background: rgba(255,255,255,.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.jtm-prize figcaption{
  margin-top: 6px;
  font-size: clamp(12px, 1.4vw, 14px);
  color: #ffd700;
  opacity: .95;
}

/* actions */
.jtm-modal__actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* buttons styled to match site */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(212,175,55,.35);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:focus-visible{ outline: 2px solid #ffd700; outline-offset: 2px; }

.btn-primary{
  color: #1b130a;
  background: linear-gradient(180deg, #ffd700, #e0b100);
  box-shadow: 0 6px 18px rgba(255,215,0,.25);
}
.btn-primary:hover{ transform: translateY(-1px); }

.btn-secondary{
  color: #ffd700;
  background: rgba(255,255,255,.06);
}
.btn-secondary:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  color: #ffdf6a;
}

/* close button (optional X) */
.jtm-modal__close{
  position: absolute;
  top: 8px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.25);
  background: rgba(255,255,255,.05);
  color: #ffd700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.jtm-modal__close:hover{ background: rgba(255,255,255,.10); }

@media (max-width: 540px){
  .jtm-modal__card{ width: min(94vw, 520px); }
}

/* prevent background scroll while open */
body.modal-open{ overflow: hidden; }

/* leave room on the right for the pill */
.sched-item { padding-right: clamp(64px, 12vw, 120px); }

/* active row — soft gold wash + stronger left border */
.sched-item.is-current{
  background: linear-gradient(90deg, rgba(255,215,0,.14), rgba(0,0,0,.18) 60%);
  border-left-color: #ffd700;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.25) inset,
    0 6px 18px rgba(0,0,0,.25);
}

/* “Happening Now” pill on the right with a gold dot inside */
/* Right-side LIVE pill (gold dot + gold text) */
.sched-item.is-current::after{
  content: "  ●  LIVE";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  padding: 6px 12px 6px 14px;      /* space for the dot */
  font: 700 14px/1 "Georgia", serif;
  letter-spacing: .5px;
  color: #FFD700;                  /* gold text */
  background: rgba(255,255,255,.06);               /* subtle glass */
  border: 1px solid rgba(212,175,55,.45);          /* gold outline */
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25),
              inset 0 0 0 1px rgba(212,175,55,.15);
}

/* Tweak size/position on small screens */
@media (max-width: 520px){
  .sched-item.is-current::after{
    right: 10px;
    font-size: 12px;
    padding: 5px 10px 5px 12px;
  }
}


/* tighter on very small screens */
@media (max-width:520px){
  .sched-item { padding-right: 88px; }
  .sched-item.is-current::after{ right: 10px; padding: 3px 10px 3px 24px; }
}

/* smooth scroll for anchor jumps */
html { scroll-behavior: smooth; }

/* ensure anchors don't tuck under the nav on snap */
#countdown, #schedule, #lucky-draw { scroll-margin-top: 16px; }



.hero{ display:block; }


.sched-note{
  margin-top: clamp(6px, 1.2vw, 12px);
  padding-top: clamp(6px, 1.2vw, 10px);
  font-size: clamp(12px, 1.6vw, 14px);
  font-style: italic;
  text-align: center;
  color: rgba(255,255,255,0.65);                   /* for dark/red card */
}

/* If that card ever sits on a light background, this keeps it readable */
@media (prefers-color-scheme: light) {
  .sched-note{ color: rgba(0,0,0,0.55); border-top-color: rgba(0,0,0,0.15); }
}

/* --- Partners / Logos (FINAL, unified) ----------------------------------- */

/* Section spacing (safe to keep if you already have it) */
.partners{
  display:grid;
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(12px, 2vw, 20px);
}

/* “Organised by:” / “Supported by:” wrapper */
.partners-group{
  display:grid;
  grid-template-columns: 1fr;
  row-gap: clamp(8px, 1vw, 12px);
  align-items:start;
}

/* The label line */
.partners-label{
  color:#fff;
  opacity:.95;
  font-size: var(--partners-label-size);
  line-height:1.2;
  white-space:nowrap;
  text-align:left;
  margin-bottom: 2px;
}

/* === The only grid you need for both groups === */
.partners-group .logos-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 equal columns */
  gap: clamp(6px, 1.4vw, 12px);                       /* ↓ tighter centre gap */
  justify-items:center;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  padding-inline: clamp(8px, 2.2vw, 14px);            /* keep card borders visible */
}

/* Phones: stack one per row so nothing overflows */
@media (max-width: 700px){
  .partners-group .logos-list{ grid-template-columns: 1fr; }
}

.partners-group .logos-list > *{ height: var(--supp-card-h); width:100%; }
.partners-group.organisers .logos-list > *{ height: var(--org-card-h); }

/* Image inside each card */
.partners-group .logos-list img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding: var(--logo-card-pad);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,175,55,0.18);
  border-radius:10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  max-width:100%;
}


/* Make the organisers’ images fill a touch more (less padding);
   supporters get a bit more breathing room (more padding). */
.partners-group.organisers .logos-list img{
  padding: clamp(6px, 0.8vw, 10px);
}
.partners-group.supporters .logos-list img{
  padding: clamp(10px, 1.2vw, 14px);
}

/* === OVERRIDE: make organisers bigger, supporters smaller ============== */
.partners .partners-group.organisers  .logos-list > * { 
  height: var(--org-card-h) !important; 
}
.partners .partners-group.supporters .logos-list > * { 
  height: var(--supp-card-h) !important; 
}

/* make organisers' logos fill their card more */
.partners .partners-group.organisers  .logos-list img { 
  padding: clamp(4px, 0.6vw, 8px) !important; 
}
/* make supporters' logos a bit smaller visually */
.partners .partners-group.supporters .logos-list img { 
  padding: clamp(10px, 1.2vw, 16px) !important; 
}

/* consistent spacing between cards */
.partners .partners-group .logos-list {
  gap: clamp(6px, 1.2vw, 10px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: clamp(8px, 2vw, 12px);
}

@media (max-width: 700px){
  .partners .partners-group .logos-list { grid-template-columns: 1fr; }
}