/*
 * UG5 component layer
 * Load AFTER 01-hub-congdongxanh-base.css.
 * This file only adds public-facing UG5 components and does not depend on the
 * original hub.congdongxanh.edu.vn directory.
 */

:root {
  --ug5-clean: #36a8c7;
  --ug5-tidy: #78a943;
  --ug5-polite: #e89a32;
  --ug5-punctual: #8b70bd;
  --ug5-mindful: #d85c73;
  --ug5-section-space: clamp(48px, 7vw, 88px);
}

/* Public page container and section rhythm */
.ug5-container {
  width: min(100% - 32px, var(--cdx-content));
  margin-inline: auto;
}

.ug5-section { padding-block: var(--ug5-section-space); }
.ug5-section--soft { background: var(--cdx-brand-soft); }
.ug5-section__head { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.ug5-section__eyebrow {
  color: var(--cdx-brand);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ug5-section__title { margin: 8px 0 12px; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.ug5-section__lead { margin: 0; color: var(--cdx-muted); font-size: 1.05rem; }

/* Home hero */
.ug5-hero {
  position: relative;
  min-height: clamp(520px, 72vh, 760px);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--cdx-brand-deep);
}
.ug5-hero__media,
.ug5-hero__overlay { position: absolute; inset: 0; }
.ug5-hero__media { width: 100%; height: 100%; object-fit: cover; }
.ug5-hero__overlay {
  background: linear-gradient(90deg, rgba(6,49,50,.9) 0%, rgba(11,69,71,.67) 52%, rgba(11,69,71,.16) 100%);
}
.ug5-hero__content { position: relative; z-index: 1; max-width: 720px; padding-block: 64px; }
.ug5-hero__title { margin: 10px 0 18px; color: #fff; font-size: clamp(2.25rem, 6vw, 4.8rem); line-height: 1.05; }
.ug5-hero__lead { font-size: clamp(1rem, 2vw, 1.2rem); color: #e7f8f6; }
.ug5-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Five values */
.ug5-values { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ug5-value {
  --ug5-value-color: var(--cdx-brand);
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--cdx-border);
  border-top: 5px solid var(--ug5-value-color);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow);
}
.ug5-value--clean { --ug5-value-color: var(--ug5-clean); }
.ug5-value--tidy { --ug5-value-color: var(--ug5-tidy); }
.ug5-value--polite { --ug5-value-color: var(--ug5-polite); }
.ug5-value--punctual { --ug5-value-color: var(--ug5-punctual); }
.ug5-value--mindful { --ug5-value-color: var(--ug5-mindful); }
.ug5-value__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--cdx-brand-soft);
  background: color-mix(in srgb, var(--ug5-value-color) 16%, white);
  color: var(--ug5-value-color);
  font-size: 1.5rem;
}
.ug5-value__title { margin: 18px 0 8px; }
.ug5-value__text { margin: 0; color: var(--cdx-muted); }

/* Editorial cards, media, quotes and statistics */
.ug5-card-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ug5-story-card {
  overflow: hidden;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow);
}
.ug5-story-card__image { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
.ug5-story-card__body { padding: 20px; }
.ug5-story-card__meta { color: var(--cdx-muted); font-size: .82rem; }
.ug5-story-card__title { margin: 8px 0; }
.ug5-story-card__link { font-weight: 750; text-decoration: none; }

.ug5-quote {
  margin: 0;
  padding: clamp(24px, 5vw, 48px);
  border-left: 6px solid var(--cdx-accent);
  border-radius: var(--cdx-radius-md);
  background: #fff7e8;
  color: var(--cdx-brand-deep);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
}
.ug5-quote cite { display: block; margin-top: 14px; color: var(--cdx-muted); font-size: .88rem; font-style: normal; }

.ug5-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ug5-stat { padding: 22px 14px; text-align: center; border-radius: var(--cdx-radius-md); background: var(--cdx-brand-soft); }
.ug5-stat__value { display: block; color: var(--cdx-brand-dark); font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 850; }
.ug5-stat__label { color: var(--cdx-muted); font-size: .88rem; }

/* Competition timeline */
.ug5-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.ug5-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 16px; width: 2px; background: var(--cdx-border); }
.ug5-timeline__item { position: relative; padding: 0 0 28px 52px; }
.ug5-timeline__item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 8px;
  width: 18px;
  height: 18px;
  border: 4px solid var(--cdx-surface);
  border-radius: 50%;
  background: var(--cdx-brand);
  box-shadow: 0 0 0 2px var(--cdx-brand);
}
.ug5-timeline__title { margin: 0 0 5px; }
.ug5-timeline__meta { color: var(--cdx-muted); font-size: .88rem; }

/* Filter pills and media */
.ug5-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ug5-filter {
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--cdx-border);
  border-radius: 999px;
  background: var(--cdx-surface);
  color: var(--cdx-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.ug5-filter:hover,
.ug5-filter[aria-pressed="true"] { border-color: var(--cdx-brand); background: var(--cdx-brand); color: #fff; }
.ug5-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--cdx-radius-md); background: #0d2929; }
.ug5-video iframe,
.ug5-video img { width: 100%; height: 100%; border: 0; object-fit: cover; }

/* Status for unverified or forthcoming information */
.ug5-pending {
  padding: 18px;
  border: 1px dashed var(--cdx-accent);
  border-radius: var(--cdx-radius-sm);
  background: var(--cdx-warning-soft);
  color: var(--cdx-warning);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .ug5-hero { min-height: auto; color: var(--cdx-text); background: #fff; }
  .ug5-hero__media,
  .ug5-hero__overlay { display: none; }
  .ug5-hero__title { color: var(--cdx-brand-deep); }
  .ug5-hero__lead { color: var(--cdx-text); }
}