/* ============================================================
   PAGES.CSS — Styles cho 4 trang mới
   applications.html · application-detail.html · about.html · contact.html
   Ecolux Lighting B2B — v1.0
   Ref: pages2-layout-specs.md, design-tokens.md
   ============================================================ */


/* ══════════════════════════════════════════
   BREADCRUMB — dùng chung 4 trang
   (products.css định nghĩa cho products.html; copy vào đây vì
   các trang mới không load products.css)
   ══════════════════════════════════════════ */

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
  color: var(--color-primary-active);
}

.breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.breadcrumb__separator {
  font-size: var(--text-sm);
  color: var(--color-border);
  margin-inline: var(--space-1);
  user-select: none;
}

.breadcrumb__current {
  font-size: var(--text-sm);
  color: var(--color-text-heading);
  font-weight: var(--font-medium);
}


/* ══════════════════════════════════════════
   APPLICATION GRID — applications.html
   ══════════════════════════════════════════ */

.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .app-grid {
    gap: var(--space-8);
  }
}

/* ── AppCard ── */
.app-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-default);
  display: block;
  text-decoration: none;
}

.app-card:hover {
  transform: scale(1.02);
}

.app-card:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.app-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(17, 24, 39, 0.85) 0%,
    rgba(17, 24, 39, 0.3) 50%,
    transparent 100%
  );
}

.app-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--space-6);
}

.app-card__label {
  color: var(--color-white);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2) 0;
}

@media (min-width: 1280px) {
  .app-card__label {
    font-size: var(--text-2xl);
  }
}

.app-card__sublabel {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-4) 0;
}

.app-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  white-space: nowrap;
  min-height: 44px;
}

.app-card__cta:hover {
  background-color: rgba(255, 255, 255, 0.15);
  text-decoration: none;
  color: var(--color-white);
}

.app-card__cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════
   APPLICATION HERO — application-detail.html
   ══════════════════════════════════════════ */

.app-hero {
  position: relative;
  height: 320px;
  overflow: hidden;
  background-color: var(--color-bg-inverse);
}

@media (min-width: 768px) {
  .app-hero {
    height: 420px;
  }
}

@media (min-width: 1280px) {
  .app-hero {
    height: 520px;
  }
}

.app-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 24, 39, 0.85) 0%,
    rgba(17, 24, 39, 0.4) 50%,
    transparent 100%
  );
}

.app-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-8) var(--space-4);
  max-width: 1200px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .app-hero__content {
    padding: var(--space-12) var(--space-8);
  }
}

@media (min-width: 1280px) {
  .app-hero__content {
    padding: var(--space-16) var(--space-12);
  }
}

.app-hero__heading {
  color: var(--color-white);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3) 0;
}

@media (min-width: 768px) {
  .app-hero__heading {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 1280px) {
  .app-hero__heading {
    font-size: var(--text-4xl);
  }
}

.app-hero__subtext {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 640px;
}

@media (min-width: 768px) {
  .app-hero__subtext {
    font-size: var(--text-lg);
  }
}


/* ══════════════════════════════════════════
   CHALLENGE SECTION — application-detail.html
   ══════════════════════════════════════════ */

.challenge-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .challenge-section__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
  }
}

.challenge-section__intro {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .challenge-section__intro {
    flex: 0 0 38%;
  }
}

.challenge-section__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4) 0;
}

@media (min-width: 768px) {
  .challenge-section__title {
    font-size: var(--text-3xl);
  }
}

.challenge-section__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  flex: 1;
}

@media (min-width: 640px) {
  .challenge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.challenge-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-xl);
}

.challenge-item__icon-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: var(--color-primary-subtle);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.challenge-item__icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.challenge-item__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-1) 0;
  line-height: var(--leading-snug);
}

.challenge-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* ══════════════════════════════════════════
   APPLICATION GALLERY — application-detail.html
   ══════════════════════════════════════════ */

.app-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .app-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .app-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .app-gallery__item--wide {
    grid-column: span 2;
  }
}

.app-gallery__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.app-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-default);
}

.app-gallery__item:hover img {
  transform: scale(1.05);
}


/* ══════════════════════════════════════════
   RECOMMENDED PRODUCTS — application-detail.html
   ══════════════════════════════════════════ */

.recommended-products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .recommended-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ══════════════════════════════════════════
   ABOUT — BRAND STORY
   ══════════════════════════════════════════ */

.brand-story__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .brand-story__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
  }
}

.brand-story__text {
  flex: 1;
}

.brand-story__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-6) 0;
}

@media (min-width: 1024px) {
  .brand-story__title {
    font-size: var(--text-3xl);
  }
}

.brand-story__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
}

.brand-story__body:last-child {
  margin-bottom: 0;
}

.brand-story__image-wrap {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .brand-story__image-wrap {
    flex: 0 0 46%;
  }
}

.brand-story__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  display: block;
}


/* ══════════════════════════════════════════
   ABOUT — MISSION & VISION
   ══════════════════════════════════════════ */

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .mission-vision-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mv-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  border-top: 3px solid transparent;
}

.mv-card--mission {
  border-top-color: var(--color-primary);
}

.mv-card--vision {
  border-top-color: var(--color-accent);
}

.mv-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.mv-card--mission .mv-card__icon-wrap {
  background-color: var(--color-primary-subtle);
  color: var(--color-primary);
}

.mv-card--vision .mv-card__icon-wrap {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
}

.mv-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--leading-snug);
}

.mv-card--mission .mv-card__title {
  color: var(--color-primary-hover);
}

.mv-card--vision .mv-card__title {
  color: var(--color-accent);
}

.mv-card__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* ══════════════════════════════════════════
   ABOUT — CORE VALUES
   ══════════════════════════════════════════ */

.core-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .core-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .core-values-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.value-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .value-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.value-item__icon-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: var(--color-primary-subtle);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.value-item__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-snug);
}

.value-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* ══════════════════════════════════════════
   ABOUT — CERTIFICATION GRID
   ══════════════════════════════════════════ */

.certification-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
  align-items: center;
}

.cert-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  min-width: 140px;
  text-align: center;
  transition: box-shadow var(--transition-base);
}

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

.cert-logo__badge {
  width: 64px;
  height: 64px;
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.cert-logo__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  margin: 0;
}

.cert-logo__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}


/* ══════════════════════════════════════════
   ABOUT — TEAM GRID
   ══════════════════════════════════════════ */

.team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
}

.team-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  text-align: center;
  width: 100%;
  max-width: 280px;
}

.team-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto var(--space-4) auto;
  background-color: var(--color-bg-muted);
}

@media (min-width: 1024px) {
  .team-card__avatar {
    width: 96px;
    height: 96px;
  }
}

.team-card__name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-1) 0;
}

.team-card__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.team-card__contact {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  margin: 0;
}

.team-card__contact:hover {
  color: var(--color-primary);
}


/* ══════════════════════════════════════════
   CONTACT — LAYOUT
   ══════════════════════════════════════════ */

.contact-main__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .contact-main__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
  }
}

.contact-form-wrapper {
  flex: 1;
}

@media (min-width: 1024px) {
  .contact-form-wrapper {
    flex: 0 0 60%;
  }
}


/* ── Contact Form ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__group--half {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .contact-form__group--half {
    flex-direction: row;
    gap: var(--space-5);
  }
  .contact-form__group--half > .contact-form__group {
    flex: 1;
  }
}

.contact-form__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-heading);
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.contact-form__required {
  color: var(--color-danger);
  font-weight: var(--font-bold);
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  line-height: var(--leading-normal);
  box-sizing: border-box;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-text-disabled);
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* DARK MODE (QA LOW-004) — glow focus hardcode rgba(245,158,11,*) là tông
   amber thuần của bản sáng, lệch tông "vàng đồng" (bronze) của dark mode.
   Đổi sang rgba bronze để nhất quán thương hiệu (không phải lỗi tương phản,
   chỉ là polish). */
:root[data-theme="dark"] .contact-form__input:focus,
:root[data-theme="dark"] .contact-form__select:focus,
:root[data-theme="dark"] .contact-form__textarea:focus {
  box-shadow: 0 0 0 3px rgba(196, 150, 80, 0.20);
}

.contact-form__input.is-valid,
.contact-form__select.is-valid,
.contact-form__textarea.is-valid {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.contact-form__input.is-error,
.contact-form__select.is-error,
.contact-form__textarea.is-error {
  border-color: var(--color-danger);
  background-color: var(--color-danger-subtle);
}

.contact-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

@media (min-width: 1024px) {
  .contact-form__textarea {
    min-height: 160px;
  }
}

.contact-form__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.contact-form__error::before {
  content: '⚠';
  font-size: var(--text-xs);
}

.contact-form__legal {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.contact-form__success {
  background-color: var(--color-accent-subtle);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: none;
}

.contact-form__success.is-visible {
  display: block;
}

.contact-form__success-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-green-700);
  margin: 0 0 var(--space-2) 0;
}

/* DARK MODE (QA HIGH-001) — green-700 đọc thẳng primitive, ~3.26:1 trên nền
   translucent xanh (--color-accent-subtle) của .contact-form__success ở
   dark — dưới AA 4.5:1. Dùng --color-green-dark-accent (#22C55E, 8.7:1). */
:root[data-theme="dark"] .contact-form__success-title {
  color: var(--color-green-dark-accent);
}

.contact-form__success-text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}


/* ── Contact Info Panel ── */
.contact-info {
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

@media (min-width: 1024px) {
  .contact-info {
    flex: 0 0 calc(40% - var(--space-8));
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}

.contact-info__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-6) 0;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.contact-info__item:last-of-type {
  margin-bottom: 0;
}

.contact-info__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  margin-top: 2px;
}

.contact-info__label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-1) 0;
}

.contact-info__value {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-normal);
}

.contact-info__value a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.contact-info__value a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.contact-info__value .placeholder-text {
  font-style: italic;
  color: var(--color-text-subtle);
}

.contact-info__note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: var(--space-1) 0 0 0;
}

.contact-info__divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-6) 0;
}

.contact-info__no-showroom {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: var(--leading-relaxed);
  margin: 0;
}

.contact-info__social-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.contact-info__social-links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.contact-info__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.contact-info__social-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}


/* ── Map Placeholder ── */
.map-placeholder {
  background-color: var(--color-bg-muted);
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-style: italic;
  text-align: center;
  padding: var(--space-8);
}

@media (min-width: 1024px) {
  .map-placeholder {
    height: 400px;
  }
}

.map-placeholder__icon {
  width: 48px;
  height: 48px;
  color: var(--color-border);
}


/* ══════════════════════════════════════════
   SECTION HEADING UTILITY (dùng chung 4 trang)
   ══════════════════════════════════════════ */

.section-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3) 0;
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--text-3xl);
  }
}

.section-title--center {
  text-align: center;
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-10) 0;
}

.section-subtitle--center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


/* ══════════════════════════════════════════
   PLACEHOLDER TEXT UTILITY
   ══════════════════════════════════════════ */

.placeholder-text {
  font-style: italic;
  color: var(--color-text-subtle);
}

em.placeholder-text {
  display: block;
}


/* ══════════════════════════════════════════
   CONTACT — UTILITY OVERRIDES (HIGH-004)
   ══════════════════════════════════════════ */

.section-subtitle--form-intro {
  margin-bottom: var(--space-8);
}

.contact-explore__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════
   ABOUT — CREDIBILITY BAR BACKGROUND (HIGH-005)
   ══════════════════════════════════════════ */

.about-page .credibility-bar {
  background-color: var(--color-amber-50);
}

/* QA LOW-003: selector trên hiện KHÔNG BAO GIỜ áp dụng — body_class() mặc
   định của WordPress không sinh ra class "about-page" (page-about.php dùng
   body_class() chuẩn, không có filter thêm class này). Vá dark mode PHÒNG
   HỜ ở đây (rẻ, vô hại vì selector chưa từng chạy) để tránh "bẫy" nếu sau
   này wp-theme-developer sửa đúng selector/thêm filter body_class — không
   thay thế cho việc sửa selector thật (ngoài phạm vi CSS, cần đổi PHP). */
:root[data-theme="dark"] .about-page .credibility-bar {
  background-color: var(--color-primary-subtle);
}


/* ══════════════════════════════════════════
   PAGE HERO — Shared utility
   (Copy từ products.css vì knowledge/article/projects
   không load products.css theo ràng buộc brief-pages-3.md)
   ══════════════════════════════════════════ */

.page-hero {
  background-color: var(--color-bg-subtle);
  padding-block: var(--section-py-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}

.page-hero__heading {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.page-hero__subtext {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .page-hero__heading {
    font-size: var(--text-4xl);
  }
}


/* ══════════════════════════════════════════
   KNOWLEDGE — knowledge.html
   Ref: pages3-layout-specs.md §1
   ══════════════════════════════════════════ */

/* ── Filter tabs (shared với projects.html) ── */

.knowledge-filter,
.project-filter {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-block: var(--space-4);
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-raised);
}

.knowledge-filter__tabs,
.project-filter__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.knowledge-filter__tabs::-webkit-scrollbar,
.project-filter__tabs::-webkit-scrollbar {
  display: none;
}

.kf-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: all var(--transition-fast);
}

.kf-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.kf-tab:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.kf-tab--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-on);
  font-weight: var(--font-semibold);
}

/* ── Article grid section ── */

.article-grid-section {
  padding-block: var(--space-12);
}

@media (min-width: 1024px) {
  .article-grid-section {
    padding-block: var(--space-16);
  }
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* ── Article card ── */

.article-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.article-card[hidden] {
  display: none;
}

.article-card__image-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.article-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-default);
}

.article-card:hover .article-card__image {
  transform: scale(1.04);
}

.article-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.article-card__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  align-self: flex-start;
}

.article-card__badge--tech {
  background: var(--color-primary-subtle);
  color: var(--color-amber-700);
}

/* DARK MODE — vá thêm (rà "hardcode màu còn sót"). Lớp .article-card__badge--*
   hiện KHÔNG được template PHP nào gọi (chưa wire vào single.php/home.php —
   giữ lại từ Phase 1), nhưng vá sẵn để tránh "bẫy" nếu được dùng lại sau này:
   color: var(--color-amber-700) đọc thẳng primitive, tương phản kém trên nền
   translucent gần-đen của --color-primary-subtle ở dark mode. */
:root[data-theme="dark"] .article-card__badge--tech {
  color: var(--color-bronze-600);
}

.article-card__badge--app {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.article-card__badge--news {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.article-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__title-link {
  color: inherit;
  text-decoration: none;
}

.article-card__title-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.article-card__title-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.article-card__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.article-card__date,
.article-card__read-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.article-card__meta-sep {
  color: var(--color-border);
  font-size: var(--text-xs);
}


/* ══════════════════════════════════════════
   ARTICLE DETAIL — article-detail.html
   Ref: pages3-layout-specs.md §2
   ══════════════════════════════════════════ */

/* ── Container narrow (article hero, article body max-width) ── */

.container--narrow {
  max-width: 860px;
}

/* ── Article hero ── */

.article-hero {
  background: var(--color-bg-subtle);
  padding-block: var(--space-12) var(--space-8);
  border-bottom: 1px solid var(--color-border-subtle);
}

.article-hero__heading {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-4) 0;
}

@media (min-width: 768px) {
  .article-hero__heading {
    font-size: var(--text-4xl);
  }
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── Article layout (2 cột desktop) ── */

.article-layout {
  padding-block: var(--space-12);
}

.article-layout__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .article-layout__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
  }
}

/* ── Article body ── */

.article-body {
  flex: 1;
  min-width: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .article-body {
    flex: 0 0 65%;
  }
}

.article-body__intro {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: var(--leading-relaxed);
}

.article-body h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  margin: var(--space-10) 0 var(--space-4) 0;
  padding-top: var(--space-8);
  border-top: 2px solid var(--color-primary);
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.article-body p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.article-body ul,
.article-body ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.article-body li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.article-body__figure {
  margin: var(--space-8) 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.article-body__fig-img {
  width: 100%;
  height: auto;
  display: block;
}

.article-body__figcaption {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-subtle);
}

/* ── Sidebar ── */

.article-sidebar {
  order: -1; /* Sidebar on top on mobile (spec wireframe §2.10) */
}

@media (min-width: 1024px) {
  .article-sidebar {
    order: 0;
    flex: 0 0 calc(35% - var(--space-8));
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    max-height: calc(100vh - 88px - var(--space-6));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ── Table of Contents ── */

.article-toc {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.article-toc__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
}

.article-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.article-toc__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
  line-height: var(--leading-normal);
}

.article-toc__link:hover {
  color: var(--color-text);
  background: var(--color-bg-muted);
}

.article-toc__link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.article-toc__link--active {
  color: var(--color-primary-hover);
  font-weight: var(--font-medium);
  border-left-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* ── Sidebar CTA card ── */

.article-sidebar__cta-card {
  background: var(--color-bg-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.article-sidebar__cta-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  margin: 0 0 var(--space-3) 0;
}

.article-sidebar__cta-text {
  font-size: var(--text-sm);
  color: var(--color-footer-text);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5) 0;
}

.article-sidebar__cta-card .btn--primary {
  width: 100%;
  justify-content: center;
}

/* ── Sidebar download ── */

.article-sidebar__download {
  text-align: center;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.article-sidebar__download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-accent);
  text-decoration: none;
}

.article-sidebar__download-link:hover {
  text-decoration: underline;
}

.article-sidebar__download-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-style: italic;
  margin: var(--space-2) 0 0 0;
}

/* ── Callout boxes ── */

.article-callout {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border-left: 4px solid transparent;
}

.article-callout--warning {
  background: var(--color-amber-50);
  border-left-color: var(--color-primary);
}

.article-callout--highlight {
  background: var(--color-accent-subtle);
  border-left-color: var(--color-accent);
}

.article-callout__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.article-callout__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.article-callout--warning .article-callout__icon {
  color: var(--color-primary-hover);
}

.article-callout--highlight .article-callout__icon {
  color: var(--color-accent);
}

.article-callout__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.article-callout--warning .article-callout__label {
  color: var(--color-amber-700);
}

.article-callout--highlight .article-callout__label {
  color: var(--color-green-700);
}

/* DARK MODE — vá thêm (rà "hardcode màu còn sót"). .article-callout--* hiện
   KHÔNG được template PHP nào gọi (giữ lại từ Phase 1, chưa wire vào
   single.php/home.php), nhưng vá sẵn: .article-callout--warning nền đổi
   sang translucent bronze tự động đúng (dùng --color-primary/--color-accent-subtle
   là semantic alias), CHỈ 2 dòng label color dưới đây đọc thẳng primitive
   amber-700/green-700 (tương phản kém trên nền tối) cần vá riêng. */
:root[data-theme="dark"] .article-callout--warning {
  background: var(--color-primary-subtle);
}

:root[data-theme="dark"] .article-callout--warning .article-callout__label {
  color: var(--color-bronze-600);
}

:root[data-theme="dark"] .article-callout--highlight .article-callout__label {
  color: var(--color-green-dark-accent);
}

.article-callout__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
  color: var(--color-text);
}

.article-callout--highlight .article-callout__text {
  color: var(--color-text-muted);
}

/* ── Article table ── */

.article-table-wrap {
  overflow-x: auto;
  margin: var(--space-8) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.article-table caption {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  caption-side: top;
}

.article-table th {
  background: var(--color-bg-subtle);
  color: var(--color-text-heading);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.article-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  vertical-align: top;
}

.article-table tbody tr:hover td {
  background: var(--color-bg-subtle);
}

.article-table__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* ── Inline product grid (article-detail) ── */

.article-products {
  margin-top: var(--space-8);
}

.article-products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .article-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .article-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Related articles ── */

.article-related {
  padding-top: var(--space-10);
  margin-top: var(--space-10);
  border-top: 1px solid var(--color-border-subtle);
}

.article-related__heading {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-6) 0;
}

.article-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .article-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ══════════════════════════════════════════
   PROJECTS — projects.html
   Ref: pages3-layout-specs.md §3
   ══════════════════════════════════════════ */

/* ── Project grid section ── */

.project-grid-section {
  padding-block: var(--space-12);
}

@media (min-width: 1024px) {
  .project-grid-section {
    padding-block: var(--space-16);
  }
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

/* ── Project card ── */

.project-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.project-card[hidden] {
  display: none;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

@media (min-width: 1024px) {
  .project-card {
    flex-direction: row;
  }
}

.project-card__image-wrap {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .project-card__image-wrap {
    flex: 0 0 45%;
    aspect-ratio: auto;
  }
}

.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-default);
}

.project-card:hover .project-card__image {
  transform: scale(1.04);
}

.project-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(17, 24, 39, 0.75);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

.project-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.project-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  line-height: var(--leading-snug);
  margin: 0;
}

.project-card__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-style: italic;
  display: block;
  margin-top: var(--space-1);
}

.project-card__title-link {
  color: inherit;
  text-decoration: none;
}

.project-card__title-link:hover {
  color: var(--color-primary-hover);
}

.project-card__title-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.project-card__location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.project-card__location-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.project-card__chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.project-card__chip {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.project-card__chip-label {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  min-width: 80px;
  flex-shrink: 0;
}

.project-card__chip-value {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  font-family: var(--font-mono);
}

.project-card__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary-hover);
  text-decoration: none;
  margin-top: auto;
}

.project-card__cta:hover {
  color: var(--color-primary-active);
  text-decoration: underline;
}

.project-card__cta:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════
   PROJECT DETAIL — project-detail.html
   ══════════════════════════════════════════ */

/* ── Hero: breadcrumb color overrides (dark background) ── */

.app-hero__breadcrumb .breadcrumb__list {
  margin-bottom: var(--space-3);
}

.app-hero__breadcrumb .breadcrumb__link {
  color: rgba(255, 255, 255, 0.7);
}

.app-hero__breadcrumb .breadcrumb__link:hover {
  color: var(--color-white);
}

.app-hero__breadcrumb .breadcrumb__link:focus-visible {
  outline-color: rgba(255, 255, 255, 0.6);
}

.app-hero__breadcrumb .breadcrumb__separator {
  color: rgba(255, 255, 255, 0.4);
}

.app-hero__breadcrumb .breadcrumb__current {
  color: rgba(255, 255, 255, 0.9);
}

/* Placeholder text on dark hero background */
.app-hero .placeholder-text {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Hero: space-type badge below H1 ── */

.project-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary-on);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
}

/* ── Section 2: Project Overview grid ── */

.project-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .project-overview__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .project-overview__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.project-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-xs);
}

.project-stat__label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.project-stat__value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-snug);
}

/* ── Section 3: Challenge & Solution ── */

.project-challenge {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .project-challenge {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-12);
  }
}

.project-challenge__col {
  flex: 1;
}

.project-challenge__heading {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-5) 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-subtle);
}

.project-challenge__heading--solution {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary);
}

.project-challenge__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.project-challenge__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
}

.project-challenge__item::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-subtle);
  margin-top: 0.5em;
}

.project-challenge__list--solution .project-challenge__item::before {
  background-color: var(--color-primary);
}

/* ── Section 4: Project Gallery (with captions) ── */

.project-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .project-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .project-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.project-gallery__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.project-gallery__item--wide {
  grid-column: span 2;
}

@media (min-width: 768px) {
  .project-gallery__item--wide {
    grid-column: span 2;
  }
}

.project-gallery__img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.project-gallery__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-default);
}

.project-gallery__item:hover .project-gallery__img-wrap img {
  transform: scale(1.05);
}

.project-gallery__caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
  padding: 0 var(--space-1);
}

/* ── Section 5: Project Products Used ── */

.project-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .project-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

.project-product-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.project-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.project-product-card__image-wrap {
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.project-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-default);
}

.project-product-card:hover .project-product-card__image {
  transform: scale(1.04);
}

.project-product-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.project-product-card__series {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.project-product-card__model {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-snug);
  margin: 0;
}

.project-product-card__specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.project-product-card__specs li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.project-product-card__specs li::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  margin-top: 0.45em;
}

.project-product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary-hover);
  text-decoration: none;
  min-height: 44px;
  margin-top: auto;
}

.project-product-card__cta:hover {
  color: var(--color-primary-active);
  text-decoration: underline;
}

.project-product-card__cta:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ── Section 6: Related Projects Grid (3-col, vertical cards) ── */

.project-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .project-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .project-related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Keep project-card vertical inside related grid (override horizontal layout) */
.project-related-grid .project-card {
  flex-direction: column;
}

.project-related-grid .project-card__image-wrap {
  flex: none;
  aspect-ratio: 4 / 3;
}