/* CSS RESETS */

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

h1,
h2 {
  line-height: 1.5; /* Set shorter line heights on headings and interactive elements */
  text-wrap: balance; /* Balance text wrapping on headings */
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Hiding class, making content visible only to screen readers but not visually */
/* "sr" meaning "screen-reader" */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* FONTS */

/* figtree-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/figtree-v9-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: normal;
  font-weight: 800;
  src: url("../assets/fonts/figtree-v9-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* CUSTOM VARIABLES */

:root {
  /* COLORS */

  --clr-yellow: hsl(47, 88%, 63%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-gray-500: hsl(0, 0%, 42%);
  --clr-gray-950: hsl(0, 0%, 7%);

  /* TYPOGRAPHY */

  --ff-main: "Figtree", sans-serif;
  --fs-heading: clamp(1.25rem, 1.0115rem + 1.0178vw, 1.5rem);
  --fs-body: clamp(0.875rem, 0.7557rem + 0.5089vw, 1rem);
  --fs-small: clamp(0.75rem, 0.6307rem + 0.5089vw, 0.875rem);

  /* SPACINGS */

  --space-50: 0.25rem;
  --space-100: 0.5rem;
  --space-150: 0.75rem;
  --space-300: 1.5rem;

  /* BORDER-RADIUS */

  --rounded-xs: 4px;
  --rounded-sm: 10px;
  --rounded-md: 20px;

  /* BOX-SHADOW */

  --shadow-sm: 8px 8px rgb(0, 0, 0);
  --shadow-md: 16px 16px rgb(0, 0, 0);

}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--ff-main);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--clr-gray-500);
  background-color: var(--clr-yellow);
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-300);
}

.card {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-gray-950);
  border-radius: var(--rounded-md);
  max-width: 24rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 250ms ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card:is(:hover, :focus-within) .card__title {
  color: var(--clr-yellow);
}

.card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding: var(--space-300);
  text-decoration: none;
  color: inherit;
  border-radius: inherit;
}

.card__link:focus-visible {
  outline: 2px solid var(--clr-gray-950);
  outline-offset: 4px;
}

.card__img {
  border-radius: var(--rounded-sm);
  width: 100%;
  height: auto;
}

.card__content {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-150);
}

.card__tag {
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--clr-gray-950);
  background-color: var(--clr-yellow);
  border-radius: var(--rounded-xs);
  padding: var(--space-50) var(--space-150);
}

.card__published {
  font-size: var(--fs-small);
  color: var(--clr-gray-950);
}

.card__title {
  font-size: var(--fs-heading);
  font-weight: 800;
  color: var(--clr-gray-950);
  transition: color 250ms ease;
}

.card__author {
  display: flex;
  align-items: center;
  gap: var(--space-150);
}

.card__author-img {
  width: 2rem;
  height: auto;
}

.card__author-name {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--clr-gray-950);
}