/* ==========================================================================
   buttermilk — design tokens
   Measurements sourced from Figma nodes 302:256, 316:500, 317:584.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --color-yellow: #F3BD41;
  --color-black: #080808;
  --color-black-hover: rgba(8, 8, 8, 0.6);
  --color-white: #FFFFFF;
  --color-purple: #5E006C;
  --color-grey: #C1C1C1;
  --color-dropdown-border: #F5F5F5;
  --color-pagination-bg: #EEEEEE;
  --color-divider: #E5E5E5;

  --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-sans: Helvetica, Arial, sans-serif;

  --container-max: 1512px;
  --container-pad: 80px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

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

button { font-family: inherit; cursor: pointer; }

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

:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  :root { --container-pad: 40px; }
}

@media (max-width: 600px) {
  :root { --container-pad: 20px; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
  font-family: var(--font-serif);
}

.logo {
  font-family: var(--font-serif);
  font-weight: 700; /* stand-in for Figma's "Medium" — Libre Baskerville on the web only ships 400/700 */
  font-size: 36px;
  color: var(--color-yellow);
  line-height: 1;
}

.main-nav {
  display: flex;
  gap: 44px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black);
}

.main-nav a.active {
  font-weight: 700;
}

.main-nav a:hover {
  opacity: 0.7;
}

@media (max-width: 700px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .main-nav { gap: 24px; flex-wrap: wrap; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  font-family: var(--font-serif);
  margin-top: 32px;
  padding-bottom: 85px;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 700; /* stand-in for Figma's "SemiBold" */
  font-size: 36px;
  margin: 0 0 6px;
  line-height: 1.2;
}

.hero p {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0;
  color: var(--color-black);
}

@media (max-width: 600px) {
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 17px; }
}

/* ==========================================================================
   Search + filter
   ========================================================================== */

.toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 11px;
  position: relative;
  margin-bottom: 50px;
}

.search-input {
  font-family: var(--font-sans);
  font-size: 16px;
  width: 245px;
  height: 28px;
  padding: 0 14px;
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-black);
  text-align: center;
}

.search-input::placeholder { color: var(--color-grey); }

.search-input:focus {
  outline: none;
  border-color: var(--color-black);
}

.filter-btn {
  width: 47px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: var(--color-black); /* default state: solid black */
  color: var(--color-white); /* the icon's <path> uses fill="currentColor", which reads this, not `fill` on the svg */
  transition: background 0.15s ease;
}

.filter-btn.active {
  background: var(--color-black-hover); /* open state: 60%-opacity black */
}

.filter-dropdown {
  display: none;
  position: absolute;
  top: 41px;
  right: 0;
  width: 185px;
  background: var(--color-white);
  border: 1px solid var(--color-dropdown-border);
  border-radius: 8px;
  padding: 10px 16px 16px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

.filter-dropdown.open { display: block; }

.filter-dropdown-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--color-black);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  padding: 5px 0;
}

.filter-option input { accent-color: var(--color-black); width: 16px; height: 16px; }

@media (max-width: 600px) {
  .toolbar { justify-content: stretch; }
  .search-input { width: 100%; }
}

/* ==========================================================================
   Card grid
   Columns are fluid (1fr) rather than a fixed 302px, so the grid divides
   whatever width is actually available instead of needing an exact px
   match. At the container's designed width (1512px) that math still comes
   out to exactly 302px per card — same as Figma — but it no longer
   breaks from a scrollbar, browser zoom, or a stray sub-pixel of rounding
   eating into the exact-fit total a fixed-px auto-fill grid needed.
   ========================================================================== */

.status-message {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-grey);
  padding: 40px 0;
  text-align: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch; /* every card in a row becomes the same height */
  gap: 48px;
  margin-bottom: 56px;
}

@media (min-width: 700px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1010px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1320px) {
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  width: 100%;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 28px; /* image -> text block -> button row */
}

.card-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1; /* stays square at whatever width the column computes to */
  overflow: hidden;
  background: #f2f2f2;
  border-radius: 4px;
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* matches the top-anchored crop used in the Figma frame */
}

.card-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* absorbs leftover height so the button row below lands at the same spot across a row */
}

.card-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-purple);
  margin: 0 0 8px;
}

.card-tags {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
   font-style: italic;
  color: var(--color-black);
  margin: 0 0 24px;
}

.card-description {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
  margin: 0;
  line-height: 1.4;
}

.card-actions {
  display: flex;
  gap: 6px;
}

.card-btn {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-white);
  background: var(--color-black);
  border: none;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.card-btn:hover,
.card-btn:focus-visible {
  background: var(--color-black-hover);
}

/* ==========================================================================
   Pagination — pill buttons, 42x48, radius 8. Sourced from Figma node
   318:697 (prev/page/next all share the same pill; current page is solid
   black, everything else is #EEEEEE).
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0 100px;
  font-family: var(--font-sans);
}

.pagination-pill {
  width: 42px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--color-pagination-bg);
  color: var(--color-black);
  font-size: 16px;
  font-weight: 400;
}

.pagination-pill.active {
  background: var(--color-black);
  color: var(--color-white);
}

.pagination-pill:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ==========================================================================
   Divider — separates the grid/pagination section from the footer
   ========================================================================== */

.section-divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 80px 0 40px;
  font-family: var(--font-serif);
}

.footer-brand {
  text-align: center;
  margin-bottom: 70px;
}

.footer-brand .footer-logo {
  font-size: 20px;
  font-weight: 700; /* stand-in for Figma's "SemiBold" */
  margin: 0 0 2px;
}

.footer-brand p {
  font-size: 16px;
  font-weight: 400;
  margin: 2px 0;
}

.footer-copyright {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 68px;
}

.footer-links {
  display: flex;
  justify-content: flex-start;
  gap: 54px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 16px;
}

.footer-links a:hover {
  opacity: 0.7;
}

@media (max-width: 500px) {
  .footer-links { gap: 24px; }
}