/* ==========================================================================
   Luzz Distributors
   Hand-built rebuild of luzzdistributor.ca (originally WordPress + Bricks +
   AutomaticCSS). Spacing and type scales below reproduce the AutomaticCSS
   fluid values the original page computed to, so the two render identically.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fallback typeface
   din-condensed comes from the Adobe Fonts kit loaded in the document head.
   Barlow Condensed is self-hosted so the page still sets in a DIN-like
   condensed grotesque if that kit is unavailable on the serving domain.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-condensed-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-condensed-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette, lifted from the original AutomaticCSS colour set. */
  --primary: #e03f93;   /* pink   */
  --secondary: #924b99; /* purple */
  --accent: #3f509d;    /* blue   */
  --white: #fff;
  --page-bg: #000;

  --font-display: 'din-condensed', 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --content-width: 128rem; /* 1280px */

  /* Fluid spacing scale. */
  --space-xs: 1.35rem;
  --space-s: clamp(1.8rem, 0.2079vw + 1.734rem, 2rem);
  --space-m: clamp(2.4rem, 0.625vw + 2.2rem, 3rem);
  --space-l: clamp(3.1992rem, 1.355vw + 2.7656rem, 4.5rem);
  --space-xl: clamp(4.2645rem, 2.589vw + 3.436rem, 6.75rem);
  --section-space-top: clamp(7.2rem, 5vw + 5.6rem, 12rem);
  --section-space-bottom: clamp(4.052rem, 1.3347vw + 3.6249rem, 5.3333rem);

  /* Fluid type scale. */
  --h1: clamp(6rem, 3.125vw + 5rem, 9rem);
  --h2: clamp(5rem, 1.5625vw + 4.5rem, 6.5rem);
  --text-xl: clamp(2.304rem, 0.9317vw + 2.0059rem, 3.1984rem);
  --text-xxl: clamp(2.7648rem, 1.5611vw + 2.2652rem, 4.2635rem);
  /* The contact links sit at the non-fluid xxl step on the original site. */
  --text-xxl-static: 2.7648rem;

  --leading-tight: 1.2;
  --leading-snug: 1.15;
}

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

html {
  /* 1rem = 10px, matching the original's root scale. */
  font-size: 62.5%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100vh;
  background-color: var(--page-bg);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: var(--leading-snug);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

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

picture { display: block; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 1rem 1.6rem;
  background: var(--white);
  color: #000;
}
.skip-link:focus { left: 0; }

:where(a):focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: var(--content-width);
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

/* Gradient text used by the tagline and the "Luzz Deals" heading. */
.gradient-heading {
  background-image: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-xl);
  padding: var(--section-space-top) var(--space-m) var(--section-space-bottom);
  min-height: 9vh;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #08060c;
  background-image: url('../img/bg-1280.jpg');
  background-image: image-set(
    url('../img/bg-1280.avif') type('image/avif'),
    url('../img/bg-1280.jpg') type('image/jpeg')
  );
}

@media (min-width: 769px) {
  .hero {
    background-image: url('../img/bg-1920.jpg');
    background-image: image-set(
      url('../img/bg-1920.avif') type('image/avif'),
      url('../img/bg-1920.jpg') type('image/jpeg')
    );
  }
}

@media (min-width: 1600px), (min-width: 769px) and (min-resolution: 2dppx) {
  .hero {
    background-image: url('../img/bg-2560.jpg');
    background-image: image-set(
      url('../img/bg-2560.avif') type('image/avif'),
      url('../img/bg-2560.jpg') type('image/jpeg')
    );
  }
}

.hero__inner {
  align-items: center;
  justify-content: center;
  row-gap: var(--space-xs);
}

.hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--space-xl);
  width: 100%;
}

.logo { width: 250px; }

/* Portrait and copy shrink against each other exactly as the original's
   flex row does: 300px of artwork beside a 1280px-wide copy column. */
.hero__identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
}

.portrait {
  width: 300px;
  flex-shrink: 1;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--content-width);
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

.hero__name {
  font-size: var(--h1);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--white);
}

.hero__title {
  font-size: var(--h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--space-l);
  row-gap: var(--space-m);
  width: var(--content-width);
  max-width: 100%;
}

.contact__link {
  font-size: var(--text-xxl-static);
  line-height: var(--leading-snug);
  color: var(--white);
  transition: transform 0.3s ease;
}

.contact__link:hover { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .contact__link { transition: none; }
  .contact__link:hover { transform: none; }
  html { scroll-behavior: auto; }
}

.rule {
  width: 100%;
  min-height: 10px;
  background-image: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.services {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  width: 100%;
}

.services__paddle {
  flex: none;
  width: 150px;
  margin-top: 50px;
  margin-left: 100px;
  transform: rotate(20deg);
}

.services__list {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m);
  padding-left: var(--space-xl);
}

.services__item {
  font-size: var(--text-xxl);
  line-height: var(--leading-snug);
  -webkit-background-clip: text;
  background-clip: text;
}

.services__item--coaching {
  color: var(--primary);
  background-image: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-text-fill-color: transparent;
}

.services__item--paddles {
  color: var(--secondary);
}

.services__item--clinics {
  color: var(--accent);
  background-image: linear-gradient(90deg, var(--secondary), var(--accent));
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   Luzz Deals
   -------------------------------------------------------------------------- */
.deals {
  align-items: center;
  justify-content: center;
  row-gap: var(--space-xs);
  padding-top: var(--space-xl);
}

.deals__heading {
  font-size: var(--h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.deals__text {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Instagram feed (Elfsight)
   -------------------------------------------------------------------------- */
.feed {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
}

.feed > div { width: 100%; }

/* --------------------------------------------------------------------------
   Breakpoints — these mirror the original's 991 / 767 / 478px steps.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .hero__identity { flex-direction: column; }

  .portrait { width: 300px; flex-shrink: 0; }

  .hero__copy { align-items: center; }

  .hero__name { text-align: center; }

  .hero__title {
    text-align: center;
    padding-bottom: var(--space-s);
  }

  .contact { justify-content: center; }
}

@media (max-width: 767px) {
  .services__paddle { margin-left: 0; }

  .deals__text { text-align: center; }
}

@media (max-width: 478px) {
  .hero__title { font-size: var(--text-xxl); }

  .contact {
    row-gap: var(--space-xs);
    padding-top: var(--space-l);
  }

  .services { flex-direction: column; }

  .services__list { padding-left: 0; }

  .services__item { text-align: center; }
}