.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-8);
}
.container-sm  { max-width: 760px;  margin-inline: auto; padding-inline: var(--sp-8); }
.container-md  { max-width: 1000px; margin-inline: auto; padding-inline: var(--sp-8); }
.container-lg  { max-width: 1140px; margin-inline: auto; padding-inline: var(--sp-8); }

@media (max-width: 640px) {
  .container, .container-sm, .container-md, .container-lg {
    padding-inline: var(--sp-4);
  }
}

.sec { padding-block: var(--sp-24); }
.sec-sm { padding-block: var(--sp-16); }
.sec-lg { padding-block: 7rem; }

.sec-alt { background: var(--c-cream-2); }
.sec-dark { background: var(--c-ink); color: #fff; }

.sec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-10);
  gap: var(--sp-4);
}
.sec-header-left {}
.sec-header-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-orange);
  white-space: nowrap;
  transition: gap var(--t-base) var(--ease-out);
}
.sec-header-link:hover { gap: var(--sp-3); }
.sec-header-link svg { width: 15px; height: 15px; }

.page-hero {
  padding-top: calc(var(--nav-h) + var(--sp-20));
  padding-bottom: var(--sp-16);
  background: linear-gradient(150deg, var(--c-cream) 0%, var(--c-cream-2) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(212,85,10,.07), transparent 65%);
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-6);
}
.cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-5);
}

.featured-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: var(--sp-6);
}
.featured-side { display: flex; flex-direction: column; gap: var(--sp-5); }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-8);
  align-items: start;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-10) var(--sp-8) var(--sp-24);
}
.detail-sidebar { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }

.admin-wrap { max-width: 1400px; margin-inline: auto; padding: calc(var(--nav-h) + var(--sp-8)) var(--sp-6) var(--sp-16); }

@media (max-width: 1024px) {
  .featured-grid { grid-template-columns: 1fr; }
  .detail-layout  { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .sec, .sec-sm, .sec-lg { padding-block: var(--sp-16); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .detail-layout { padding: var(--sp-6) var(--sp-4) var(--sp-16); }
  .sec-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .cats-grid { grid-template-columns: 1fr 1fr; }
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-12);
}
.pg-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--c-ink-3);
  border: 1.5px solid var(--c-cream-3);
  background: #fff;
  transition: all var(--t-base) var(--ease-out);
}
.pg-btn:hover { border-color: var(--c-orange); color: var(--c-orange); }
.pg-btn.active { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }