@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-VariableFont_slnt\,wght.ttf")
    format("truetype");
}

:root {
  --clr-white: hsl(0 100 100);
  --clr-black: hsl(0 0 0);
  --clr-grey-300: hsl(233 8 79);
  --clr-grey-200: hsl(0 0 85);
  --clr-navy-950: hsl(240 100 5);
  --clr-navy-600: hsl(236 13 42);
  --clr-gold: hsl(35 77 62);
  --clr-red-500: hsl(4 85 63);

  --fs-heading-small: 1.125rem;

  --fw-bold: 700;
  --fw-xbold: 800;

  --gap-large: 4rem;
  --gap-medium: 2rem;
  --gap-small: 1.5rem;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  color: var(--clr-navy-600);
}

h1,
h3 {
  color: var(--clr-navy-950);
}

h1 {
  font-size: clamp(2.5rem, 1.868rem + 2.105vw, 3.5rem);
}

h2 {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: var(--clr-gold);
}

h3 {
  font-size: 1.25rem;
}

/* COMPOSITION - Layout primitives */

.page-layout {
  --page-max-width: 70rem;
  --page-padding-inline: 1rem;

  display: grid;
  grid-template-columns:
    minmax(var(--page-padding-inline), 1fr)
    [content-start]
    min(100% - (var(--page-padding-inline) * 2), var(--page-max-width))
    [content-end]
    minmax(var(--page-padding-inline), 1fr);

  > * {
    grid-column: content;
  }
}

.grid {
  display: grid;
  row-gap: var(--gap-large);
  column-gap: var(--gap-medium);

  /* mobile view */
  .hero {
    row-gap: var(--gap-small);
  }

  .featured-articles {
    row-gap: var(--gap-medium);
  }

  /* desktop view */
  @media (min-width: 70rem) {
    grid-template-columns: repeat(3, 1fr);

    .col-span-2 {
      grid-column: span 2;
    }

    .row-span-2 {
      grid-row: span 2;
    }

    .hero .button {
      grid-column: 2 / 3;
      align-self: flex-end;
    }

    .col-span-all {
      grid-column: 1 / -1;
    }
  }
}

/* UTILITIES - Single-purpose classes */

.image-order {
  order: -1;
}

.subgrid {
  display: grid;
  grid-template-columns: subgrid;
}

/* BLOCKS - Component-specific styles */

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-block: clamp(2rem, 0.5rem + 5vw, 4rem);

  > nav {
    display: none;
  }

  ul {
    display: flex;
    gap: 2.3rem;
  }

  @media (min-width: 70rem) {
    > nav {
      display: initial;
    }

    > button {
      display: none;
    }

    [popover]:popover-open {
      display: none;
    }
  }
}

a,
h3 {
  transition:
    color 200ms ease-in,
    background 200ms ease-in;

  &:hover {
    color: var(--clr-red-500);
  }
}

a.button {
  color: var(--clr-navy-950);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 4.38px;
  text-transform: uppercase;
  background-color: var(--clr-red-500);
  padding-inline: 2rem;
  padding-block: 0.75rem;
  display: block;
  width: fit-content;

  &:hover {
    background-color: var(--clr-navy-950);
    color: var(--clr-white);
  }
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

.new-articles {
  --flow-space: 2rem;

  background-color: var(--clr-navy-950);
  padding-inline: 1.5rem;
  padding-block: clamp(1.25rem, 0rem + 4.167vw, var(--flow-space));

  h2 {
    margin-bottom: var(--flow-space);
  }

  h3 {
    color: var(--clr-white);
    margin-bottom: calc(var(--flow-space) / 4);

    &:hover {
      color: var(--clr-gold);
    }
  }

  p {
    color: var(--clr-grey-300);
  }

  article {
    &:not(:last-of-type)::after {
      content: "";
      display: block;
      height: 1px;
      width: 100%;
      background-color: var(--clr-navy-600);
      margin-block: var(--flow-space);
    }
  }
}

.featured-articles {
  counter-reset: article-number;
  margin-bottom: 5rem;

  article {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: var(--gap-small);
    row-gap: 0.5rem;
    align-items: center;

    counter-increment: article-number;

    &::before {
      content: "0" counter(article-number);
      font-size: 2rem;
      font-weight: var(--fw-bold);
      color: var(--clr-red-500);
      line-height: 1;
    }
  }

  h3 {
    font-size: 1.125rem;
  }

  img {
    height: 8rem;
    grid-row: 1 / -1;
  }
}

[popover] {
  border: none;
  transform: translateX(100%);
  transition:
    transform 0.4s,
    overlay 0.4s ease-out;
  width: clamp(16rem, 10.167rem + 19.444vw, 19.5rem);
  display: block;
  inset: unset;
  right: 0;
  top: 0;
  height: 100dvh;

  &:popover-open {
    transform: translateX(0);

    .mobile-menu-inner {
      display: flex;
    }
  }

  &::backdrop {
    background-color: hsl(from var(--clr-navy-950) h s l / 0.5);
  }

  .mobile-menu-inner {
    display: none;
    flex-direction: column;
    gap: 5.5rem;

    padding-block: clamp(2rem, 0.5rem + 5vw, 4rem);
    padding-inline: clamp(1.25rem, -0.417rem + 5.556vw, 2.25rem);
  }

  button {
    align-self: end;
  }
}

/* EXCEPTIONS - Context-specific overrides */

ul[data-menu="mobile"] {
  flex-direction: column;
  font-size: 1.125rem;
}