/* ==========================================================================
   layout.css - Container toàn site, section, lưới dùng lại
   --------------------------------------------------------------------------
   Nguyên tắc: nền section chạy full viewport, NỘI DUNG luôn nằm trong
   .container căn giữa với max-width = --container-max.
   ========================================================================== */

.container {
  width: min(
    100% - (var(--container-gutter) * 2),
    var(--container-max)
  );
  margin-inline: auto;
}

/* Biến thể hiếm dùng - chỉ khi thiết kế thực sự cần */
.container--narrow {
  width: min(100% - (var(--container-gutter) * 2), 900px);
}

.container--wide {
  width: min(100% - (var(--container-gutter) * 2), 1480px);
}

/* ------------------------------------------------------------- Section */
.section {
  position: relative;
  padding-block: var(--space-8);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--dark {
  background-color: var(--color-ink);
  color: var(--color-on-dark);
}

.section--dark :is(h1, h2, h3, h4) {
  color: var(--color-on-dark);
}

/* --------------------------------------------------- Đầu mục section */
.section__head {
  max-width: 900px;
}

.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
  max-width: none;
}

.section__head--row .section__head-text {
  max-width: 900px;
}

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.eyebrow--navy {
  color: var(--color-navy-soft);
}

.section__title {
  font-size: var(--fs-h2);
  margin-bottom: 6px;
}

.section__subtitle {
  font-size: var(--fs-lead);
  color: var(--color-text);
  max-width: 840px;
}

/* ---------------------------------------------------------- Lưới chung */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Bố cục nội dung + sidebar cho trang trong */
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 48px;
  align-items: start;
}

.content-layout--reverse {
  grid-template-columns: 330px minmax(0, 1fr);
}