/*
 * ATN Summit — structural system: line tokens and line utilities.
 * Loaded right after atn-summit.webflow.css (see src/layouts/BaseLayout.astro).
 * Every class here maps one-to-one to a Webflow class (variables → Webflow Variables).
 *
 * Section anatomy
 *   <section class="section-…">               background of the section
 *     <div class="block">                       frame: max-width 2300px, side gutter var(--gutter)
 *       <div class="block-inner is-line-…">     a row of content
 *     <div class="divider">                     spacer row (same frame as .block)
 *       <div class="divider-inner _20em is-line-x is-line-top">
 *
 * .block, .block-inner and .divider-inner never draw borders themselves: every section line
 * comes from the utilities below, stacked on the element. Every line is exactly 1px
 * (--line-width), so it renders as one crisp line at any viewport width and pixel ratio.
 *
 * Three rules keep every line single:
 *   1. Frame edges (a row's outer box) come from the is-line-* utilities below, which follow
 *      one drawing convention: top/left just outside the box, bottom/right just inside it, so
 *      the edges of touching boxes always share a pixel. A box nested flush inside a framed
 *      box doesn't repeat the frame's bottom or right line.
 *   2. Cells side by side (or stacking on smaller screens) never draw their own separators:
 *      their container is a divided group (.is-divided, below), whose gaps are the lines.
 *   3. A section that clips its content uses overflow-x: clip only, never overflow: hidden,
 *      or it would cut off the top line of its first row (painted just outside that row).
 *
 * Utilities (desktop and down, like a Webflow base style):
 *   is-line-all · is-line-x (left + right) · is-line-y (top + bottom)
 *   is-line-top · is-line-right · is-line-bottom · is-line-left
 * Breakpoint variants switch a line on, or off, from that breakpoint down:
 *   is-line-{side}-tablet           is-no-line-{side}-tablet           (≤ 991px)
 *   is-line-{side}-mobile-landscape is-no-line-{side}-mobile-landscape (≤ 767px)
 *   is-line-{side}-mobile-portrait  is-no-line-{side}-mobile-portrait  (≤ 479px)
 *   is-no-line-tablet · is-no-line-mobile-landscape · is-no-line-mobile-portrait (all sides)
 *
 * Example: a boxed row whose top line is dropped on phones, where rows stack:
 *   <div class="block-inner is-line-all is-no-line-top-mobile-portrait">
 */

:root {
  --line-width: 1px;
  --line-color: var(--darker-1);
  /* Side gutter: the space between the screen edge and the frame's outer line, shared by every
     full-width frame (.block, .tabs, .page-hero__frame, .progress-nav__inner, .section-venn on
     tablet, and the footer on desktop). */
  --gutter: 2.88em;
  /* Label font: the body font (BDO Grotesk), in its Medium weight. */
  --font-label: Bdogrotesk, Arial, sans-serif;
  --font-label-weight: 500;
}

@media screen and (max-width: 991px) {
  :root { --gutter: .8em; }
}

@media screen and (max-width: 479px) {
  :root { --gutter: .52em; }
}

/*
 * Label typography: BDO Grotesk Medium, in normal capitalisation as written (Home, Sponsors &
 * Attending firms), for the navigation and every small label.
 * Applies to the whole site header (links, buttons, the phone menu), the section navigation on
 * the D5 and Influence Day pages, and the small labels: section labels (.is-txt-label), tier
 * eyebrows (.text-block-3) and tech tags (.tech-tag-text). A new label only needs its class here.
 */
.site-nav,
.btn-animate-chars__text.nav.comp,
.is-txt-label,
.text-block-3,
.tech-tag-text {
  font-family: var(--font-label);
  font-weight: var(--font-label-weight);
  letter-spacing: normal;
  text-transform: none;
}

/*
 * Divided group: separators between the children, derived from the layout itself.
 * Every child outlines itself (1px just outside its box) and the group's gap is one line
 * width, so two neighbours' outlines fall on the same pixel: one line between them, vertical
 * while they sit side by side, horizontal once they stack or wrap, in any grid or flex layout,
 * nested groups included. At the group's outer edge the outlines land exactly on the pixel of
 * any adjacent border (the group's own is-line-* box, a parent's line or the row above), so
 * they never double with the frame either. Outlines take no space and need no background, so
 * an incomplete last row simply leaves an empty cell, framed by its neighbours.
 * Use: put .is-divided on the flex/grid container. Cells never draw their own borders.
 */
/* The one-line gap is what makes neighbouring outlines coincide, so it always wins. Rows are
   implicit: an explicit but empty row (Webflow's default "auto auto") would add a stray gap
   below the last cells, and with it a second line. */
.is-divided {
  grid-column-gap: var(--line-width) !important;
  grid-row-gap: var(--line-width) !important;
  grid-template-rows: none !important;
}

/* In a flex group, cells may shrink to share a row (gaps included) and keep their own height
   when the group stacks. */
.is-divided > * {
  outline: var(--line-width) solid var(--line-color);
  outline-offset: 0;
  flex: 1 1 auto;
  min-width: 0;
  border-style: none !important;
}

/*
 * Raised row: a top line is painted just outside its box, so a positioned overlay in the row
 * above (the "Sold out" cover on ticket cards) can hide it. .is-raised lifts the row, and its
 * lines, above such overlays (z-index 30: above in-content overlays, below the navigation).
 */
.is-raised {
  position: relative;
  z-index: 30;
}

/*
 * Line utilities. Drawing convention: a TOP or LEFT line is painted just outside the box (a
 * box-shadow, taking no space); a BOTTOM or RIGHT line just inside it (a border). Wherever two
 * boxes touch — stacked, side by side, or one nested flush inside another — the top/left line
 * of one lands on the very pixel of the other's bottom/right line, so a shared edge is always a
 * single line, with no per-element bookkeeping. --line-c fills the outer top-left corner pixel
 * when a box has both a top and a left line.
 */
@property --line-t { syntax: '*'; inherits: false; initial-value: 0 0 #0000; }
@property --line-l { syntax: '*'; inherits: false; initial-value: 0 0 #0000; }
@property --line-c { syntax: '*'; inherits: false; initial-value: 0 0 #0000; }

[class*="is-line-"],
[class*="is-no-line-"] {
  box-shadow: var(--line-c), var(--line-t), var(--line-l);
}

.is-line-all { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); --line-c: calc(-1 * var(--line-width)) calc(-1 * var(--line-width)) 0 0 var(--line-color); border-right: var(--line-width) solid var(--line-color); border-bottom: var(--line-width) solid var(--line-color); }
.is-line-x { --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); border-right: var(--line-width) solid var(--line-color); }
.is-line-y { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); border-bottom: var(--line-width) solid var(--line-color); }
.is-line-top { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); }
.is-line-right { border-right: var(--line-width) solid var(--line-color); }
.is-line-bottom { border-bottom: var(--line-width) solid var(--line-color); }
.is-line-left { --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); }
.is-line-top.is-line-left, .is-line-top.is-line-x, .is-line-y.is-line-left, .is-line-y.is-line-x { --line-c: calc(-1 * var(--line-width)) calc(-1 * var(--line-width)) 0 0 var(--line-color); }

@media screen and (max-width: 991px) {
  .is-no-line-tablet { --line-t: 0 0 #0000; --line-l: 0 0 #0000; --line-c: 0 0 #0000; border-style: none; }
  .is-no-line-x-tablet { --line-l: 0 0 #0000; --line-c: 0 0 #0000; border-right-style: none; }
  .is-no-line-y-tablet { --line-t: 0 0 #0000; --line-c: 0 0 #0000; border-bottom-style: none; }
  .is-no-line-top-tablet { --line-t: 0 0 #0000; --line-c: 0 0 #0000; }
  .is-no-line-right-tablet { border-right-style: none; }
  .is-no-line-bottom-tablet { border-bottom-style: none; }
  .is-no-line-left-tablet { --line-l: 0 0 #0000; --line-c: 0 0 #0000; }

  .is-line-all-tablet { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); --line-c: calc(-1 * var(--line-width)) calc(-1 * var(--line-width)) 0 0 var(--line-color); border-right: var(--line-width) solid var(--line-color); border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-x-tablet { --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); border-right: var(--line-width) solid var(--line-color); }
  .is-line-y-tablet { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-top-tablet { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); }
  .is-line-right-tablet { border-right: var(--line-width) solid var(--line-color); }
  .is-line-bottom-tablet { border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-left-tablet { --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); }
}

@media screen and (max-width: 767px) {
  .is-no-line-mobile-landscape { --line-t: 0 0 #0000; --line-l: 0 0 #0000; --line-c: 0 0 #0000; border-style: none; }
  .is-no-line-x-mobile-landscape { --line-l: 0 0 #0000; --line-c: 0 0 #0000; border-right-style: none; }
  .is-no-line-y-mobile-landscape { --line-t: 0 0 #0000; --line-c: 0 0 #0000; border-bottom-style: none; }
  .is-no-line-top-mobile-landscape { --line-t: 0 0 #0000; --line-c: 0 0 #0000; }
  .is-no-line-right-mobile-landscape { border-right-style: none; }
  .is-no-line-bottom-mobile-landscape { border-bottom-style: none; }
  .is-no-line-left-mobile-landscape { --line-l: 0 0 #0000; --line-c: 0 0 #0000; }

  .is-line-all-mobile-landscape { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); --line-c: calc(-1 * var(--line-width)) calc(-1 * var(--line-width)) 0 0 var(--line-color); border-right: var(--line-width) solid var(--line-color); border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-x-mobile-landscape { --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); border-right: var(--line-width) solid var(--line-color); }
  .is-line-y-mobile-landscape { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-top-mobile-landscape { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); }
  .is-line-right-mobile-landscape { border-right: var(--line-width) solid var(--line-color); }
  .is-line-bottom-mobile-landscape { border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-left-mobile-landscape { --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); }
}

@media screen and (max-width: 479px) {
  .is-no-line-mobile-portrait { --line-t: 0 0 #0000; --line-l: 0 0 #0000; --line-c: 0 0 #0000; border-style: none; }
  .is-no-line-x-mobile-portrait { --line-l: 0 0 #0000; --line-c: 0 0 #0000; border-right-style: none; }
  .is-no-line-y-mobile-portrait { --line-t: 0 0 #0000; --line-c: 0 0 #0000; border-bottom-style: none; }
  .is-no-line-top-mobile-portrait { --line-t: 0 0 #0000; --line-c: 0 0 #0000; }
  .is-no-line-right-mobile-portrait { border-right-style: none; }
  .is-no-line-bottom-mobile-portrait { border-bottom-style: none; }
  .is-no-line-left-mobile-portrait { --line-l: 0 0 #0000; --line-c: 0 0 #0000; }

  .is-line-all-mobile-portrait { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); --line-c: calc(-1 * var(--line-width)) calc(-1 * var(--line-width)) 0 0 var(--line-color); border-right: var(--line-width) solid var(--line-color); border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-x-mobile-portrait { --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); border-right: var(--line-width) solid var(--line-color); }
  .is-line-y-mobile-portrait { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-top-mobile-portrait { --line-t: 0 calc(-1 * var(--line-width)) 0 0 var(--line-color); }
  .is-line-right-mobile-portrait { border-right: var(--line-width) solid var(--line-color); }
  .is-line-bottom-mobile-portrait { border-bottom: var(--line-width) solid var(--line-color); }
  .is-line-left-mobile-portrait { --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color); }
}


/*
 * Webflow components that draw their own left line. A border-left sits INSIDE the box, one pixel
 * right of where the line utilities draw a left line (just OUTSIDE, see "Line utilities"), so a
 * component under or over a row built with the utilities had its left edge one pixel off the grid.
 * These components drop their left border and draw the line the system's way, outside the box
 * (their content moves left by one pixel, so outlined cells inside a group sit on the line too). Where the component's
 * own CSS switches its left line off (some variants, some breakpoints) the outside line is off too.
 * A new component with a left border belongs in both lists.
 */
:is(
  .sponsors-grid-wrapper,
  .cta-block,
  .collection-item-2,
  .collection-list-wrapper.infleucner,
  .accordion-css,
  .tab-pane-tab-1,
  .filter-button._1,
  .schedule-cms-images.line-left
) {
  border-left-style: none;
}

:is(
  .sponsors-grid-wrapper,
  .cta-block:not(.maps, .no-lines, .sponsors, .sponsors-page),
  .collection-item-2,
  .collection-list-wrapper.infleucner,
  .accordion-css,
  .tab-pane-tab-1,
  .filter-button._1,
  .schedule-cms-images.line-left
) {
  --line-l: calc(-1 * var(--line-width)) 0 0 0 var(--line-color);
  box-shadow: var(--line-c), var(--line-t), var(--line-l);
}

@media screen and (max-width: 991px) {
  .accordion-css:not(.influencer) { --line-l: 0 0 #0000; }
}

@media screen and (max-width: 767px) {
  .schedule-cms-images.line-left { --line-l: 0 0 #0000; }
}

/*
 * Two-column heading rows over a two-column divided grid (the sponsor tiers and the jury, tablet).
 * The row splits its width 50/50 with the divider inside the left half, while the grid below
 * splits it around a one-line gap, so the two dividers sat half a pixel apart. The left column
 * takes half the width plus half a line, so its divider lands on the grid's gap pixel.
 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .div-block-39:not(.end),
  .div-block-39-copy:not(.end) {
    width: calc(50% + var(--line-width) / 2);
  }

  .div-block-39.end {
    width: calc(50% - var(--line-width) / 2);
  }
}