/* ==========================================================================
   FL Summer School - shared presentation layer.
   Styling only: no page copy is defined or altered here. Everything targets
   classes that already exist in the markup.
   ========================================================================== */

:root {
   /* taken from what the site already uses: the theme violet, the deep purple
      of the buttons, the amber of the Apply action */
   --fl-violet:      #8b3dff;
   --fl-violet-deep: #4e4376;
   --fl-amber:       #ffc107;
   --fl-ink:         #12102a;
   --fl-mist:        #f6f4fc;
   --fl-line:        #e6e1f5;

   --fl-r:      18px;
   --fl-r-sm:   12px;
   --fl-shadow: 0 18px 44px -24px rgba(18, 16, 42, .45);
   --fl-ease:   cubic-bezier(.2, .7, .3, 1);
}

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
   font-family: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
   letter-spacing: -.02em;
   text-wrap: balance;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:where(a, button, [tabindex]):focus-visible {
   outline: 3px solid var(--fl-violet);
   outline-offset: 3px;
   border-radius: 6px;
}

/* --- Scroll progress ----------------------------------------------------- */
.fl-progress {
   position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1080;
   background: linear-gradient(90deg, var(--fl-violet), var(--fl-amber));
   transform: scaleX(0); transform-origin: 0 50%;
   will-change: transform; pointer-events: none;
}

/* --- Reveal on scroll ---------------------------------------------------- */
/* Applied by script only, and only to elements scrollCue is not already
   handling, so the two never fight over the same node. */
.fl-reveal {
   opacity: 0; transform: translateY(16px);
   transition: opacity .5s var(--fl-ease), transform .5s var(--fl-ease);
}
.fl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
   .fl-reveal, .fl-reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   HERO - same words, new treatment
   ========================================================================== */
.summer-bg-section {
   position: relative;
   isolation: isolate;
   /* scrollCue's zoomOut cue starts the hero column at scale(1.2); on a tablet
      that is wider than the viewport and the page scrolls sideways for the
      600ms the animation lasts. Clipping here contains it. */
   overflow-x: clip;
}

/* a gradient scrim so type can sit straight on the photograph */
.summer-bg-section::after {
   content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
   background:
      linear-gradient(180deg, rgba(18,16,42,.74) 0%, rgba(18,16,42,.80) 58%, rgba(18,16,42,.90) 100%),
      radial-gradient(80% 60% at 12% 0%, rgba(139,61,255,.34), transparent 62%);
}
.summer-bg-section > .container { position: relative; z-index: 2; }

/* the panel becomes a frame rather than a card */
.summer-bg-section .hero-text-box {
   background: transparent !important;
   box-shadow: none !important;
   padding: 0 !important;
   max-width: 780px;
}
.summer-bg-section h1 {
   color: #fff;
   font-size: clamp(2.1rem, 4.6vw, 3.5rem);
   line-height: 1.05;
   -webkit-text-fill-color: #fff;   /* neutralises the theme's gradient-clipped text */
   background: none;
}
.summer-bg-section h1 .text-primary {
   background: linear-gradient(100deg, #cdaeff 0%, var(--fl-amber) 100%);
   -webkit-background-clip: text; background-clip: text;
   -webkit-text-fill-color: transparent; color: transparent;
}
.summer-bg-section .lead,
.summer-bg-section .lead.text-dark {
   color: #ded8f2 !important;
   font-size: clamp(1rem, 1.45vw, 1.15rem);
   line-height: 1.7;
}
.summer-bg-section .lead .text-primary { color: var(--fl-amber) !important; }

/* pill buttons */
.summer-bg-section .btn { border-radius: 999px; font-weight: 650; padding: .78rem 1.6rem; }
.summer-bg-section .btn-yellow { box-shadow: 0 14px 30px -14px rgba(255,193,7,.9); }
.summer-bg-section .btn-purple {
   background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4);
   backdrop-filter: blur(8px); color: #fff;
}
.summer-bg-section .btn-purple:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.summer-bg-section .btn-purple-outline {
   background: transparent; border-color: rgba(255,255,255,.35); color: #efeaff;
}
.summer-bg-section .btn-purple-outline:hover { background: #fff; color: var(--fl-violet-deep); border-color: #fff; }
.summer-bg-section .btn { transition: transform .22s var(--fl-ease), background-color .22s var(--fl-ease),
                                      border-color .22s var(--fl-ease), color .22s var(--fl-ease); }
.summer-bg-section .btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
   .summer-bg-section .btn { transition: none; }
   .summer-bg-section .btn:hover { transform: none; }
}

/* --- Countdown ----------------------------------------------------------- */
.fl-count {
   display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: .7rem; max-width: 430px; margin-inline: auto;
}
.fl-count__cell {
   padding: .75rem .4rem; text-align: center;
   border: 1px solid rgba(255,255,255,.18);
   border-radius: var(--fl-r-sm);
   background: rgba(255,255,255,.08);
   backdrop-filter: blur(8px);
}
.fl-count__num {
   display: block; font-size: 1.8rem; font-weight: 700; line-height: 1; color: #fff;
   font-family: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
   font-variant-numeric: tabular-nums;
}
.fl-count__label {
   display: block; margin-top: .3rem; font-size: .66rem;
   letter-spacing: .1em; text-transform: uppercase; color: #bdb4dc;
}
.fl-count__done { color: var(--fl-amber); font-weight: 600; margin: 0; }

/* ==========================================================================
   IMAGERY - applies on every page
   ========================================================================== */

/* one radius and one soft ring, so photographs look like a set */
.img-fluid.rounded-3,
.img-fluid.rounded,
figure img,
.card img:not(.avatar) {
   border-radius: var(--fl-r);
}
.img-fluid.shadow-sm {
   box-shadow: 0 10px 30px -18px rgba(18,16,42,.55) !important;
}

/* photographs inside a linked figure get a slow zoom under a fixed frame */
figure {
   overflow: hidden;
   border-radius: var(--fl-r);
   margin-bottom: 1rem;
}
figure img { display: block; width: 100%; transition: transform .6s var(--fl-ease); }
figure a:hover img,
figure:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { figure img { transition: none; } figure:hover img { transform: none; } }

/* portraits: even circles with a soft ring instead of a hard border */
.avatar.rounded-circle {
   object-fit: cover;
   box-shadow: 0 0 0 4px rgba(139,61,255,.10), 0 10px 26px -16px rgba(18,16,42,.6);
   transition: box-shadow .3s var(--fl-ease), transform .3s var(--fl-ease);
}

/* ==========================================================================
   LECTURER / SPEAKER CARDS
   ========================================================================== */
.card.card-lift {
   border: 1px solid var(--fl-line);
   border-radius: var(--fl-r);
   transition: transform .3s var(--fl-ease), box-shadow .3s var(--fl-ease),
               border-color .3s var(--fl-ease);
}
.card.card-lift:hover {
   transform: translateY(-6px);
   box-shadow: var(--fl-shadow);
   border-color: rgba(139,61,255,.35);
}
.card.card-lift:hover .avatar.rounded-circle {
   transform: scale(1.06);
   box-shadow: 0 0 0 4px rgba(139,61,255,.22), 0 14px 30px -16px rgba(18,16,42,.7);
}
@media (prefers-reduced-motion: reduce) {
   .card.card-lift, .card.card-lift:hover,
   .avatar.rounded-circle, .card.card-lift:hover .avatar.rounded-circle {
      transform: none; transition: none;
   }
}

/* ==========================================================================
   SPONSOR / PARTNER LOGO WALLS
   ========================================================================== */
#sponsors .card, #partners .card {
   border-radius: var(--fl-r);
   border: 1px solid var(--fl-line) !important;
   transition: transform .3s var(--fl-ease), box-shadow .3s var(--fl-ease),
               border-color .3s var(--fl-ease);
}
#sponsors .card:hover, #partners .card:hover {
   transform: translateY(-5px);
   box-shadow: var(--fl-shadow);
   border-color: rgba(139,61,255,.3) !important;
}
/* Partner marks are logos, so they are normalised to a common height. The
   max-width matters: capping only the height let wide marks (Flower, Google
   Cloud) render wider than their card and spill onto the next one. */
#partners .card img {
   max-height: 84px !important;
   max-width: 100% !important;
   width: auto !important;
   height: auto !important;
   object-fit: contain;
   transition: transform .35s var(--fl-ease);
}

/* The sponsor tiles are not logos - they are full announcement graphics with
   readable text ("Platinum Sponsor", "We are partners"). They need the room
   the page's own markup asks for, so no height cap is imposed here. */
#sponsors .card img {
   max-width: 100%;
   width: 100%;
   height: auto;
   object-fit: contain;
   transition: transform .35s var(--fl-ease);
}
/* only two sponsors, so give them half the row instead of a quarter */
@media (min-width: 992px) {
   #sponsors .row > * { width: 42%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
   #sponsors .row > * { width: 50%; }
}

#sponsors .card:hover img, #partners .card:hover img { transform: scale(1.04); }

@media (max-width: 767.98px) {
   /* the two sponsor tiles carry readable text, so they take the full row on
      a phone rather than being squeezed into a half-width card */
   #sponsors .row > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
   #sponsors .card, #partners .card,
   #sponsors .card img, #partners .card img { transition: none; transform: none; }
}