/* ============================================================
   Sailibre website — flat solid indigo theme on the Sailibre
   Design System tokens (indigo/orange/slate, Archivo/Hanken/
   Space Mono, 4px grid). One solid background colour, inset
   spacer lines between sections, full-bleed project bands with
   a sheen and grid-aligned text overlay.
   ============================================================ */
@import url('design-system/styles.css');

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

:root {
  --max-width: var(--container-lg); /* 1120px */
  --gutter: var(--space-5);
  --page: var(--indigo-900);         /* the one solid background */
  --divider: rgba(255, 255, 255, 0.12);

  /* Left offset of the container's content column, in viewport units.
     Used to align full-bleed carousel text to the page grid. */
  --content-inset: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));

  /* How much of the neighbouring gallery slide peeks in. */
  --peek: 8vh;

  /* DS alias remaps for the dark canvas */
  --color-text:        var(--white);
  --color-text-muted:  var(--indigo-100);
  --color-text-subtle: var(--slate-400);
  --color-primary:     var(--white);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font: var(--text-body);
  color: var(--color-text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--color-highlight);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Layout ---- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Header ---- */

.site-header {
  padding: var(--space-5) 0;
  background: rgba(8, 22, 64, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-logo {
  flex-shrink: 0;
  display: flex;
}

.site-logo img {
  height: 26px;
  width: auto;
}

.lang-selector {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
}

.lang-selector a {
  padding: 2px 4px;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.lang-selector a:hover {
  color: var(--color-highlight);
}

.lang-selector a.active {
  color: var(--white);
}

.lang-selector span {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}

/* ---- Sections + inset spacer lines ---- */

section {
  padding: var(--space-9) 0;
}

/* Subtle divider between sections — flush with the content column,
   never wider than it. */
section + section::before {
  content: "";
  display: block;
  width: min(calc(var(--max-width) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  height: 1px;
  background: var(--divider);
  margin: calc(-1 * var(--space-9)) auto var(--space-9);
}

.section-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-7);
}

.section-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-6));
  margin-bottom: var(--space-7);
  max-width: 600px;
  line-height: var(--leading-relaxed);
}

/* ---- Hero ---- */

.hero {
  padding: var(--space-10) 0 var(--space-9);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--white);
  margin-bottom: var(--space-5);
}

.hero p {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  color: rgba(255, 255, 255, 0.6);
  max-width: 620px;
  line-height: var(--leading-relaxed);
}

/* ---- Services — flat editorial columns with an orange rule ---- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-8);
}

.service-card {
  padding-top: var(--space-4);
  border-top: var(--border-med) solid var(--color-accent);
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--white);
  margin-bottom: var(--space-4);
}

.service-card p {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 42ch;
}

@media (max-width: 720px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* ---- Projects — paginated horizontal carousel ---- */

.projects-section {
  padding: var(--space-9) 0;
}

.gallery {
  position: relative;
}

/* Single caption pinned over the gallery, aligned to the page grid.
   The images scroll; this stays put and cross-fades to the active
   slide (populated + animated by gallery.js). */
.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  /* Docked toward the bottom now that the credit line is gone — bottom
     padding reduced by roughly the credit's footprint. */
  padding: var(--space-8) var(--content-inset) calc(var(--space-8) - var(--space-5));
  will-change: opacity, transform;
}

/* When JS captions are live, the per-slide text is hidden — it stays in
   the markup as the no-JS fallback and as the caption's data source. */
.gallery.captions-live .slide-inner {
  display: none;
}

.projects-carousel {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
  cursor: grab;
}

/* While dragging: free scroll (no snap fight), no text selection. */
.projects-carousel.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

/* The gallery is keyboard-focusable but shows no focus outline. */
.projects-carousel:focus,
.projects-carousel:focus-visible {
  outline: none;
  box-shadow: none;
}

/* The last slide snaps to the END of the scroll port — so it fills the
   page just like the first, but with the PREVIOUS slide peeking 10vw on
   the left (a "you've reached the end" cue). Only its text is nudged
   left by the peek so it still lands on the page grid. */
.project-slide:last-child {
  scroll-snap-align: end;
}

.project-slide:last-child .slide-inner {
  padding-left: max(0px, calc(var(--content-inset) - var(--peek)));
}

.projects-carousel::-webkit-scrollbar {
  display: none;                /* WebKit */
}

.project-slide {
  position: relative;
  flex: 0 0 calc(100vw - var(--peek));
  height: 75vh;
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--indigo-800);
  background-size: cover;
  background-position: center;
}

/* Sheen + legibility wash over the backdrop. */
.project-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(to top, rgba(8, 22, 64, 0.92) 0%, rgba(8, 22, 64, 0.5) 38%, rgba(8, 22, 64, 0.08) 72%, rgba(8, 22, 64, 0.25) 100%);
  pointer-events: none;
}

.slide-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Align the overlay text to the page content grid, and keep it no
     wider than the container column. */
  padding: var(--space-8) var(--content-inset) calc(var(--space-8) - var(--space-5));
}

.slide-inner .boat-name,
.gallery-caption .boat-name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--white);
  margin-bottom: var(--space-2);
}

.slide-inner .boat-model,
.gallery-caption .boat-model {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-highlight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.slide-inner .boat-achievements,
.gallery-caption .boat-achievements {
  list-style: none;
  margin-top: var(--space-5);
  max-width: 440px;
}

.slide-inner .boat-achievements li,
.gallery-caption .boat-achievements li {
  font-size: var(--text-md);
  color: var(--white);
  padding: var(--space-3) 0;
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.28);
}

.photo-credit {
  display: none;
}

/* ---- Partners — white-monochrome logo wall + names ---- */

/* Labeled sub-groups, generously spaced. */
.partner-group + .partner-group {
  margin-top: var(--space-8);
}

.partner-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-6);
}

.partner-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7) var(--space-9);
}

.partner-wall .brand {
  display: inline-flex;
}

.partner-wall .brand img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);   /* fully white, no hover change */
}

.partner-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-6) var(--space-8);
}

.partner-links a {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
}

.partner-links a:hover {
  color: var(--color-highlight);
}

/* ---- Contact — unified type, info + social on one line ---- */

/* Double the breathing room below the last section. */
.contact-section {
  padding-bottom: calc(var(--space-9) * 2);
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-6);
}

.contact-row a {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--white);
}

.contact-row a:hover {
  color: var(--color-highlight);
}

.contact-social {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-6);
  margin-left: auto;
}

.contact-social a {
  color: var(--color-text-muted);
}

/* ---- Brand subpages (page-header / content-block) ---- */

.page-header {
  padding: var(--space-8) 0 var(--space-7);
  position: relative;
}

.page-header::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(var(--max-width) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  height: 1px;
  background: var(--divider);
}

.page-header h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--white);
}

.page-header p {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 560px;
  margin-top: var(--space-3);
  line-height: var(--leading-relaxed);
}

.content-block {
  max-width: 640px;
}

.content-block h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--space-4);
}

.content-block p {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.content-block p:last-child {
  margin-bottom: 0;
}

.content-block a {
  color: var(--white);
  font-weight: var(--fw-semibold);
}

.content-block a:hover {
  color: var(--color-highlight);
}

.content-block a.ext-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}

.content-block a.ext-link:hover {
  color: var(--color-highlight);
}

/* ---- Responsive ---- */

@media (max-width: 860px) {
  .hero {
    padding: var(--space-8) 0 var(--space-7);
  }

  section,
  .projects-section {
    padding: var(--space-8) 0;
  }

  section + section::before {
    margin: calc(-1 * var(--space-8)) auto var(--space-8);
  }

  .contact-social {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --peek: 5vh;
  }

  .project-slide {
    height: 70vh;
  }

  /* Partner logos as a 2×2 grid. */
  .partner-wall {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);            /* 48px min */
    align-items: center;
    justify-items: start;
  }

  /* Contact links stacked, each underneath the other. */
  .contact-row,
  .contact-social {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .contact-social {
    margin-left: 0;
  }
}