/* main.css — NeuroAI Dialogues
 *
 * Palette and type follow QBio, ENS-PSL (https://qbio.ens.psl.eu):
 *   - #3494BC, #111, #333, #555, #CCCCCC, #E9F2F6, #EDEDED, #FFF and the
 *     'Source Sans Pro' family come from the site's stylesheets;
 *   - #155073, #2684A9 and #35B4DB are sampled from the QBio logo gradient.
 * Brand pack (option B, assets/brand/): #0b1c33 is the logo background and
 * the header colour; #040F22 is the banner's dark empty area.
 * Use only the variables below. Contrast notes (WCAG):
 *   --qb-brand and --qb-light are decorative only (rules, borders, accents);
 *   they are too light for body text on white. Links use --qb-deep (8.6:1).
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root{
    --qb-deep:   #155073;   /* logo, dark end: links, headings accents */
    --qb-mid:    #2684A9;   /* logo, middle: session block blend */
    --qb-brand:  #3494BC;   /* QBio link/accent colour: rules and borders */
    --qb-light:  #35B4DB;   /* logo, light end: hero accent line */
    --ink:       #111;      /* headings, speaker names */
    --text:      #333;      /* body text */
    --muted:     #555;      /* secondary text */
    --bg:        #FFF;      /* page background */
    --bg-tint:   #E9F2F6;   /* session blocks, plenary rows */
    --bg-footer: #EDEDED;   /* footer */
    --rule:      #CCCCCC;   /* hairlines */
    --brand-navy:  #0b1c33; /* brand pack: logo background, page header */
    --brand-night: #040F22; /* brand pack: banner's dark left area, overlays */

    --font: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    --page: 50rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --column: min(var(--page), 100% - 2 * var(--gutter));
}

/* ---- Base ------------------------------------------------------------- */

*, *::before, *::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    font-size:1.0625rem;
    line-height:1.6;
}

/* Navigation and page content sit in one centred column. */
table.navigation, main > *{
    width:var(--column);
    margin-inline:auto;
}

h2{
    margin-top:3.5rem;
    margin-bottom:1rem;
    color:var(--ink);
    font-size:clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    font-weight:700;
    line-height:1.2;
}
h2::before{
    content:"";
    display:block;
    width:2.5rem;
    height:3px;
    margin-bottom:0.75rem;
    background:var(--qb-brand);
}

p, ul{margin-top:0; margin-bottom:1.25rem;}
ul{padding-left:0; list-style:none;}
ul li{margin-bottom:0.5rem;}
strong, b{font-weight:600; color:var(--ink);}
em, i{font-style:italic;}

a{
    color:var(--qb-deep);
    text-decoration:underline;
    text-decoration-color:var(--qb-brand);
    text-decoration-thickness:1px;
    text-underline-offset:0.2em;
}
a:hover{text-decoration-thickness:2px;}
/* Visible focus for keyboard users: deep blue ring with a white halo, so it
   shows on white, tinted and hero backgrounds alike. */
:focus-visible{
    outline:3px solid var(--qb-deep);
    outline-offset:2px;
    box-shadow:0 0 0 5px var(--bg);
}
main:focus{outline:none;}

.skip-link{
    position:absolute;
    left:var(--gutter);
    top:-4rem;
    z-index:10;
    padding:0.6rem 1rem;
    background:var(--bg);
    color:var(--qb-deep);
    font-weight:600;
    border:2px solid var(--qb-deep);
    border-radius:4px;
}
.skip-link:focus{top:0.75rem;}


/* ---- Header / banner --------------------------------------------------- */
/* Banner text is live HTML, never baked into the image. */

.banner{
    position:relative;
    overflow:hidden;
    padding:clamp(1.75rem, 4vw, 2.75rem) 0;
    background:var(--brand-navy);
    border-bottom:4px solid var(--qb-light);
    color:var(--bg);
}
.top-left, .bottom-right{
    position:relative;
    z-index:1;
    width:var(--column);
    margin-inline:auto;
}
.top-left{
    margin-top:0;
    margin-bottom:0;
    font-size:clamp(2.5rem, 1.5rem + 5vw, 4.75rem);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-0.015em;
}
.title1{color:var(--bg);}
.title2{color:var(--bg-tint); font-weight:400;}
.bottom-right{
    margin-top:1rem;
    font-size:clamp(1.05rem, 0.95rem + 0.6vw, 1.375rem);
    font-weight:600;
    line-height:1.45;
}

/* Inner pages: the one-line reversed logo is the h1. Its SVG has a #0b1c33
   background, identical to the header, so no box shows. */
.top-left a{display:inline-block; line-height:0;}
.banner-logo{
    --h:clamp(2.75rem, 2rem + 3vw, 4.5rem);
    display:block;
    height:var(--h);
    width:auto;
    margin-left:calc(var(--h) * -14 / 66);   /* the SVG draws its lettering 14 of 66 units in */
}

/* Home page: photo banner (<picture>), brain on the right, text on the left. */
.banner-photo{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:clamp(20rem, 37.5vw, 34rem);   /* 37.5vw = the 2400x900 image ratio */
    padding:3rem 0;
    background:var(--brand-night);
}
.banner-photo picture, .banner-photo picture img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.banner-photo picture img{object-fit:cover; object-position:right center;}
/* Keeps the text area dark (WCAG AA) even where the image's dots reach it. */
.banner-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        color-mix(in srgb, var(--brand-night) 85%, transparent) 0%,
        color-mix(in srgb, var(--brand-night) 70%, transparent) 35%,
        transparent 65%);
}
.banner-photo .title2{display:block;}

/* ---- Navigation ------------------------------------------------------- */

table.navigation{border-collapse:collapse; border-bottom:1px solid var(--rule);}
table.navigation tbody, table.navigation tr{display:flex; flex-wrap:wrap; column-gap:clamp(1.25rem, 5vw, 2.5rem);}
td.navigation{display:block; padding:0;}
td.navigation a{
    display:block;
    padding:1rem 0 0.8rem;
    border-bottom:3px solid transparent;
    color:var(--text);
    font-weight:600;
    text-decoration:none;
}
td.navigation a:hover{color:var(--qb-deep); border-bottom-color:var(--rule);}
td.navigation a.current{color:var(--qb-deep); border-bottom-color:var(--qb-brand);}

/* ---- At a glance: tiles and the shape of the day (home) --------------- */

ul.glance{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:1rem;
    margin-top:0;
    margin-bottom:2.5rem;
}
.tile{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0.2rem;
    margin:0;
    padding:1.1rem 1.1rem 1.2rem;
    background:var(--bg-tint);
    border-top:3px solid var(--qb-brand);
}
.tile-icon{
    width:1.6rem;
    height:1.6rem;
    margin-bottom:0.35rem;
    fill:none;
    stroke:var(--qb-brand);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.tile-label{color:var(--muted); font-size:0.95rem; font-weight:700; font-variant-caps:all-small-caps; letter-spacing:0.06em;}
.tile-value{color:var(--ink); font-size:1.2rem; font-weight:700; line-height:1.25;}
a.tile-value{color:var(--qb-deep);}
.tile-detail{color:var(--muted); font-size:0.95rem; font-weight:400; line-height:1.35;}
a.tile-detail{color:var(--qb-deep);}
.tile-link{margin-top:0.35rem; font-size:0.95rem;}
/* The whole tile is clickable for single-link tiles. */
.tile-stretch::after{content:""; position:absolute; inset:0;}
.tile:has(.tile-stretch:hover){outline:2px solid var(--qb-brand); outline-offset:-2px;}

/* Shape of the day: column widths are minutes (15, 105, 20, 105, 75, 105, 20, 125).
   The <ol> has no horizontal padding, so its edges are the content column's.
   09:00 / 18:30 sit above the ends; break labels sit under the middle of their gap. */
ol.day{
    --bar:3rem;          /* 48px: the smallest height that fits two lines */
    --above:1.4rem;      /* row for the 09:00 / 18:30 labels */
    position:relative;
    display:grid;
    grid-template-columns:15fr 105fr 20fr 105fr 75fr 105fr 20fr 125fr;
    gap:2px;
    margin-top:0;
    margin-bottom:0;
    padding:var(--above) 0 2.6rem;
    list-style:none;
    container-type:inline-size;
}
ol.day > li{position:relative; min-width:0; min-height:var(--bar); margin:0; padding:0;}
.day-break{background:var(--bg-footer);}      /* the one neutral tone for all gaps */

/* Session blocks: two lines, left-aligned, same inner padding in every block. */
ol.day > li > a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
    padding:0.4rem 0.9rem;
    color:inherit;
    line-height:1.15;
    text-decoration:none;
}
ol.day > li > a:hover .day-name{text-decoration:underline;}
.day-meta{font-size:0.8rem; white-space:nowrap;}
.day-meta .day-time{font-variant-numeric:tabular-nums;}
.day-name{font-size:1rem; font-weight:700; white-space:nowrap;}
/* Session blocks: white text on blends of the logo blues, dark to light.
   White contrast (WCAG AA needs 4.5:1): 8.65, 6.80, 5.57, 4.76. */
.day-s1{background:var(--qb-deep); color:var(--bg);}
.day-s2{background:color-mix(in srgb, var(--qb-deep) 68%, var(--qb-mid)); color:var(--bg);}
.day-s3{background:color-mix(in srgb, var(--qb-deep) 55%, var(--qb-brand)); color:var(--bg);}
.day-s4{background:color-mix(in srgb, var(--qb-deep) 57%, var(--qb-light)); color:var(--bg);}
.short{display:none;}

/* Start and end of the day, above the strip, flush with its ends. */
.day-edge{position:absolute; bottom:100%; margin-bottom:0.15rem; color:var(--muted); font-size:0.8rem; line-height:1.2; font-variant-numeric:tabular-nums;}
.day-open .day-edge{left:0;}
.day-end{position:absolute !important; top:var(--above); right:0; min-height:0 !important; height:0;}
.day-end .day-edge{right:0;}

/* Break labels: centred on the gap's midpoint, word above time. */
.day-label{
    position:absolute;
    top:calc(100% + 0.35rem);
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    text-align:center;
    color:var(--muted);
    font-size:0.8rem;
    line-height:1.3;
}
.day-label .day-name, .day-label .day-time{display:block; font-size:inherit; font-weight:400;}

/* Narrower strip: abbreviate only the long session name. */
@container (max-width: 44rem){
    .day-s3 .long{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
    .day-s3 .short{display:inline;}
}
/* Narrow strip (phones): blocks grow, text stacks, nothing is clipped. */
@container (max-width: 36rem){
    ol.day > li > a{justify-content:flex-start; padding:0.4rem 0.35rem;}
    .day-sep{display:none;}
    .day-meta{font-size:0.7rem; white-space:normal;}
    .day-meta .day-time{display:block;}
    .day-name{margin-top:0.15rem; font-size:0.75rem; white-space:normal; hyphens:manual;}
    .day-label{font-size:0.75rem;}
}
/* Very narrow: keep only the time under the breaks so labels cannot collide. */
@container (max-width: 17rem){
    .day-label .day-name{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
}

.visually-hidden{
    position:absolute !important;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

/* ---- Home page --------------------------------------------------------- */
/* Outside the tiles: bold only for section headings and speaker names;
   links are not underlined until hover or focus (the focus ring stays). */

.home main > h2{margin-top:6rem;}
.home main > h2:first-child{margin-top:4rem;}
.home h2::before{display:none;}
.home a{text-decoration:none;}
.home a:hover, .home a:focus-visible{text-decoration:underline;}
.home .sponsors-label{font-weight:400;}
.home p.thanks{margin-top:3rem; color:var(--muted);}
.home footer{margin-top:6rem;}

/* The one tinted band (Confirmed speakers), full width. */
.home main > .band{width:100%; margin-top:6rem; padding:4.5rem 0 4rem; background:var(--bg-tint);}
.band > *{width:var(--column); margin-inline:auto;}
.band > h2{margin-top:0;}
.band > p:last-child{margin-bottom:0;}

/* ---- Programme -------------------------------------------------------- */

table{border-collapse:collapse;}
td{padding:0; text-align:left; vertical-align:top;}

/* One table per programme item: time column + content column. */
td.date{
    width:4.5rem;
    padding:1.1rem 1rem 0 0;
    color:var(--qb-deep);
    font-weight:600;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
table:has(td.date){border-top:1px solid var(--rule);}
td.title, td.title-special{padding-top:1rem; font-size:1.2rem; font-weight:600; line-height:1.35;}
td.title{color:var(--ink);}
td.title-special{color:var(--qb-deep);}
td.speaker{padding-top:0.2rem; color:var(--ink); font-weight:600;}
td.abstract{padding:0.15rem 0 1rem; color:var(--muted);}

/* Session blocks */
table[id^="session"]{
    margin-top:2.5rem;
    margin-bottom:0.5rem;
    background:var(--bg-tint);
    border-left:4px solid var(--qb-brand);
}
table[id^="session"] td{padding-inline:clamp(1rem, 3vw, 1.5rem);}
table[id^="session"] td.abstract{color:var(--text);}
table[id^="session"] tr:last-child td{padding-bottom:1.25rem;}
td.room{
    padding-top:1.25rem;
    padding-bottom:0.5rem;
    color:var(--qb-deep);
    font-size:clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
    font-weight:700;
    line-height:1.25;
}
.speakers-label{
    display:block;
    margin-top:0.5rem;
    color:var(--muted);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
}
ul.speakers{margin:0.5rem 0 0;}
ul.speakers li{margin-bottom:0.85rem;}
ul.speakers li.tba{color:var(--muted); font-style:italic;}

/* Speaker entries (home grid and Programme session lists): name on its own
   line in the brand colour, affiliation below in muted text. */
/* Names never wrap (keeps hyphenated surnames such as Cayco-Gajic whole). */
.speaker-name{display:block; color:var(--qb-deep); font-size:1.25em; font-weight:700; line-height:1.25; white-space:nowrap;}
.speaker-aff{display:block; color:var(--muted); font-weight:400;}
.speaker-topic{display:block; color:var(--muted); font-size:0.9em; font-style:italic;}
ul.speaker-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1.5rem 2.5rem;
    margin-top:1.5rem;
    margin-bottom:1.75rem;
}
ul.speaker-grid li{margin:0;}
.home .speaker-name{font-weight:600;}

/* Plenary rows */
table.plenary{background:var(--bg-tint);}
table.plenary td.date{padding-left:1rem;}
table.plenary td:not(.date){padding-right:1rem;}

/* ---- Venue ------------------------------------------------------------ */

iframe.directions{
    display:block;
    height:clamp(16rem, 50vw, 24rem);
    margin-top:1.5rem;
    margin-bottom:0.75rem;
    border:1px solid var(--rule);
}

/* ---- Sponsors --------------------------------------------------------- */
/* Each sponsor is one <a class="sponsor" style="--logo-h:…"> line. Logos sit
   directly on the page background; --logo-h sets the height on the home page
   and the width follows the logo's own proportions (never stretched). */

.sponsor-group{margin-bottom:2rem;}
.sponsors-label{
    margin-bottom:0.9rem;
    color:var(--muted);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
}
div.sponsors{display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 3rem;}
a.sponsor{display:block; line-height:0; text-decoration:none;}
a.sponsor img{
    display:block;
    height:var(--logo-h, 3rem);
    width:auto;
    max-width:100%;
    object-fit:contain;
}

/* ---- Venue: address with logo, photo beside "Getting there" ----------- */

.venue-address{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;}
.venue-address p{flex:1 1 22rem; margin-bottom:0;}
.venue-logo{display:block; flex:0 0 auto; line-height:0;}
.venue-logo img{display:block; height:2.5rem; width:auto;}

.venue-split{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 18rem); gap:2.5rem; align-items:start;}
.venue-photo{margin:3.5rem 0 0; max-width:423px;}   /* native width of the image */
.venue-photo img{display:block; width:100%; height:auto;}
.venue-photo figcaption{margin-top:0.5rem; color:var(--muted); font-size:0.9rem;}

/* ---- Practical info: contacts ---------------------------------------- */
/* The "Email us" link is underlined on hover/focus only; the focus ring stays.
   Home organisers: one comma-separated line, never broken mid-name. */

p.organisers span{white-space:nowrap;}
a.contact-link{text-decoration:none;}
a.contact-link:hover, a.contact-link:focus-visible{text-decoration:underline;}

/* ---- Footer ----------------------------------------------------------- */

footer{
    margin-top:5rem;
    padding:2rem var(--gutter);
    background:var(--bg-footer);
    color:var(--muted);
    font-size:0.9rem;
    text-align:center;
}

footer div.sponsors{justify-content:center; gap:1rem 2.5rem; margin:0 auto 1.5rem;}
footer a.sponsor img{height:calc(var(--logo-h, 3rem) * 0.5333);}

/* ---- Small screens ---------------------------------------------------- */

@media (max-width: 40rem){
    td.date{width:3.75rem; padding-right:0.75rem;}
    td.title, td.title-special{font-size:1.1rem;}
    .venue-split{grid-template-columns:1fr; gap:0;}
    .venue-photo{margin-top:1.5rem;}
    div.sponsors{gap:1.25rem 2rem;}
}

@media (max-width: 60rem){
    ul.glance{grid-template-columns:repeat(2, minmax(0, 1fr));}
    ul.speaker-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width: 43.75rem){
    .banner-photo{min-height:20rem; padding:2.5rem 0;}
    .banner-photo::after{background:color-mix(in srgb, var(--brand-night) 72%, transparent);}

    ul.glance{grid-template-columns:1fr; gap:0.75rem;}
    ul.speaker-grid{grid-template-columns:1fr; gap:1.25rem;}
    .tile{padding:1rem;}

    .home main > h2, .home main > .band{margin-top:4rem;}
    .home main > .band{padding:3rem 0;}

}

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        transition:none !important;
        animation:none !important;
        scroll-behavior:auto !important;
    }
}

/* ---- Print (A4) ------------------------------------------------------- */

@media print{
    @page{size:A4; margin:15mm 15mm 18mm;}

    body{font-size:10.5pt; line-height:1.4; color:var(--ink);}
    .skip-link, table.navigation, .day,
    iframe.directions, div.sponsors, .sponsor-group, .venue-photo, .venue-logo{display:none;}

    /* Plain header instead of the coloured hero */
    .banner{min-height:0; padding:0 0 4mm; background:none; color:var(--ink); border-bottom:1pt solid var(--rule);}
    .banner-photo picture, .banner-photo::after{display:none;}
    .top-left{font-size:22pt;}
    .title1, .title2{color:var(--ink);}
    .bottom-right{margin-top:1mm; font-size:11pt;}
    .top-left, .bottom-right, main > *{width:auto; margin-inline:0;}
    main > table{width:100%;}

    h2{margin-top:7mm; font-size:14pt; break-after:avoid;}
    h2::before{display:none;}
    a{color:var(--ink); text-decoration:none;}

    /* Programme: keep each item and each session header on one page */
    table{break-inside:avoid;}
    table[id^="session"]{margin-top:6mm; background:none; border-left:2pt solid var(--qb-deep);}
    table.plenary, .tile, .band{background:none;}
    td.date{padding-top:2.5mm;}
    td.title, td.title-special{padding-top:2mm; font-size:11.5pt;}
    td.room{font-size:13pt; padding-top:2mm;}
    td.abstract{padding-bottom:2mm;}

    footer{margin-top:8mm; padding:3mm 0 0; background:none; border-top:1pt solid var(--rule); font-size:8.5pt;}
}