/* Local overrides: what the Squarespace scripts used to do at runtime. Keep this small. */

/* Index-section and banner images: JS sized them to cover their box. */
.index-section-image.content-fill, .banner-thumbnail-wrapper .content-fill { overflow: hidden; }
.index-section-image.content-fill img, .banner-thumbnail-wrapper .content-fill img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Top padding under the overlapping header at 1280px, for when JS is off;
   local-site.js recomputes it for the actual width, as the template script did. */
#headerNav.positioned { margin-top: 10px; }
.collection-type-index .index-section:first-child .has-main-image .content-inner.has-content { padding-top: 57px; }
.banner-thumbnail-wrapper .desc-wrapper { padding-top: 27px; }

/* Gallery "slider" blocks: a row of images, height set by the block's aspect ratio. */
.mr-strip { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; }
.mr-strip::-webkit-scrollbar { display: none; }
.mr-strip img.sqs-gallery-design-strip-slide {
  flex: none; height: 100%; width: auto; max-width: none; position: static; scroll-snap-align: start;
}

/* Map block (was drawn by JS). */
.mr-map iframe { display: block; width: 100%; height: 400px; border: 0; }

/* Schedule page: static event list in place of the JS calendar. */
.mr-event-list { list-style: none; margin: 0; padding: 0; }
.mr-event-list li { padding: .5em 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.mr-event-list time { display: inline-block; min-width: 16em; opacity: .75; }

/* Gallery "grid" blocks: thumbnails cropped to the block's aspect ratio. */
.mr-grid .slide .margin-wrapper { margin: var(--mr-pad, 10px); }
.mr-grid .slide a.image-slide-anchor, .mr-grid .slide .image-slide-anchor {
  display: block; position: relative; overflow: hidden; aspect-ratio: var(--mr-thumb-ratio, 1 / 1);
}
.mr-grid .slide .image-slide-anchor img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Gallery pages: JS laid the photos out in two masonry columns. */
.collection-type-gallery .gallery-wrapper .slides { column-count: 2; column-gap: 20px; }
.collection-type-gallery .gallery-wrapper .slide { break-inside: avoid; margin: 0 0 20px; }
.collection-type-gallery .gallery-wrapper .slide img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .collection-type-gallery .gallery-wrapper .slides { column-count: 1; } }

/* Summary blocks: with no thumbnail the script gave the text the full width. */
.sqs-block-summary-v2 .summary-item:not(.summary-item-has-thumbnail) .summary-content { width: 100%; }

/* Summary "autogrid" blocks (columns and gutter come from the block's settings). */
.mr-autogrid { display: grid; grid-template-columns: repeat(var(--mr-cols, 3), minmax(0, 1fr)); gap: var(--mr-gutter, 20px); }
.mr-autogrid .summary-item { width: auto !important; margin: 0 !important; float: none !important; }
@media (max-width: 640px) { .mr-autogrid { grid-template-columns: minmax(0, 1fr); } }

/* Results page (generated by tools/build_results.py). */
.mr-results { display: grid; gap: 1.2em; }
.mr-results h2 { margin: .6em 0 0; }
.mr-results-nav a { text-decoration: none; border-bottom: 1px solid currentColor; }
.mr-career, .mr-stats { display: flex; flex-wrap: wrap; gap: .3em 1.2em; }
.mr-career { margin: 0; }
.mr-career b, .mr-stats b { font-size: 1.15em; }
.mr-season { border-top: 1px solid rgba(255, 255, 255, .18); padding: .7em 0; }
.mr-season > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1.4em; cursor: pointer; list-style: none; }
.mr-season > summary::-webkit-details-marker { display: none; }
.mr-season > summary::before { content: "+"; width: 1em; opacity: .7; }
.mr-season[open] > summary::before { content: "–"; }
.mr-year { font-size: 1.5em; letter-spacing: .05em; }
.mr-source { font-size: .85em; opacity: .7; margin: .6em 0; }
.mr-table-wrap { overflow-x: auto; }
.mr-table { width: 100%; border-collapse: collapse; font-size: .9em; font-variant-numeric: tabular-nums; }
.mr-table th { text-align: left; font-weight: 400; opacity: .7; text-transform: uppercase; letter-spacing: .08em; font-size: .8em; padding: .4em .6em; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.mr-table td { padding: .45em .6em; border-bottom: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.mr-table td.mr-date { white-space: nowrap; }
.mr-races { display: flex; flex-wrap: wrap; gap: .2em 1.2em; }
.mr-race { white-space: nowrap; }
.mr-table td:nth-child(3) { min-width: 9em; }
.mr-race-name { opacity: .7; }
.mr-race.mr-win strong { color: #f2c94c; }
.mr-note { flex-basis: 100%; font-size: .85em; opacity: .75; font-style: italic; }
@media (max-width: 640px) {
  .mr-table thead { display: none; }
  .mr-table, .mr-table tbody, .mr-table tr, .mr-table td { display: block; }
  .mr-table tr { padding: .5em 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .mr-table td { border: 0; padding: .1em 0; }
  .mr-table td.mr-races { display: flex; }
}

/* Home page season stats: one row per driver. */
.mr-board-wrap { overflow-x: auto; }
.mr-stats-board { width: 100%; max-width: 820px; margin: 0 auto; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.mr-stats-board thead th { font-weight: 400; font-size: 1.35em; letter-spacing: .12em; text-transform: uppercase; opacity: .8; padding: .3em .5em; }
.mr-stats-board tbody th { text-align: left; font-weight: 400; font-size: 2em; letter-spacing: .1em; text-transform: uppercase; padding: .25em .5em .25em 0; }
.mr-stats-board td { font-size: 2.8em; padding: .2em .5em; }
@media (max-width: 640px) {
  .mr-stats-board thead th { font-size: .7em; letter-spacing: .05em; padding: .3em .2em; }
  .mr-stats-board tbody th { font-size: 1.1em; }
  .mr-stats-board td { font-size: 1.4em; padding: .2em .2em; }
}

/* Contact form (replaces the JS-rendered Squarespace form). Selectors outrank the
   form component's own CSS, which styled the old React form. */
.sqs-block .mr-form.form-wrapper .field-list .form-item { margin: 0 0 .9em; }
.sqs-block .mr-form.form-wrapper .field-list .title { display: block; margin: 0 0 .3em; padding: 0; }
.sqs-block .mr-form.form-wrapper .field-list fieldset.form-item { border: 0; padding: 0; display: flex; gap: 0 2%; min-width: 0; }
.sqs-block .mr-form.form-wrapper .field-list fieldset.form-item .field { flex: 1 1 0; min-width: 0; margin: 0; }
.sqs-block .mr-form.form-wrapper .field-list .form-item .caption { display: block; font-size: .85em; margin: 0 0 .2em; }
.sqs-block .mr-form.form-wrapper .field-list .form-item .description { display: inline; margin: 0 0 0 .4em; padding: 0; opacity: .7; font-size: .85em; }
.sqs-block .mr-form.form-wrapper .field-list .form-item .field-element { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 4px 8px; border: 1px solid #ccc; font: inherit; }
.sqs-block .mr-form.form-wrapper .field-list .form-item textarea.field-element { min-height: 6em; resize: vertical; }
.sqs-block .mr-form.form-wrapper .cf-turnstile { margin: .4em 0 1em; }
.sqs-block .mr-form.form-wrapper .form-button-wrapper { text-align: center; }