/* ================================================================
   LXMUN · global.css
   Foundation styles for index.html (and future pages).
   Reusable components live in: assets/css/components.css
   
   Contents:
     1. Design Tokens (CSS Custom Properties)
     2. Reset & Base
     3. Hero
     4. News Section
     5. Moments
     6. About
     7. Portal Cards
     8. Simulator Section
     9. Responsive Breakpoints (page-specific sections)
   ================================================================ */


/* ── 1. Design Tokens ── */
:root {
  /* Color Palette */
  --color-primary:       #003175;
  --color-primary-dark:  #001F5C;
  --color-accent:        #0b5cab;
  --color-accent-hover:  #084a8c;
  --color-accent-light:  #244B8E;
  --color-link:          #118ACB;
  --color-divider:       #356DCF;

  --color-bg:            #ffffff;
  --color-bg-muted:      #f5f7fa;
  --color-bg-hover:      #E2EAF2;
  --color-text:          #202020;
  --color-text-muted:    #707070;
  --color-text-light:    azure;

  /* Typography */
  --font-chinese:        "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-latin:          "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.5rem;    /* 24px */
  --fs-xl:   2rem;      /* 32px */
  --fs-2xl:  2.5rem;    /* 40px */
  --fs-3xl:  3.5rem;    /* 56px */
  --fs-hero: clamp(2.5rem, 6vw, 4.8rem);

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;

  /* Shadow */
  --shadow-card:   0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-raised: 0 8px 28px rgba(0, 0, 0, 0.14);

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 5vw, 4rem);
  --navbar-h:      64px;

  /* Transitions */
  --transition-base: 0.22s ease;
}


/* ── 2. Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-chinese);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
}


/* ── 3. Hero ── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--navbar-h);
  padding-bottom: var(--space-2xl);
  background:
    linear-gradient(to right, rgba(5, 20, 55, 0.75) 38%, rgba(0,0,0,0.25) 100%),
    url('../../media/index_hero.jpg') center / cover no-repeat;
}

.hero__content {
  width: min(680px, 90%);
  margin-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hero__eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--color-text-light);
  line-height: 1.1;
}

.hero__subtitle {
  font-family: var(--font-latin);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight: 300;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.04em;
}

.hero__desc {
  font-size: var(--fs-sm);
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-xs);
}


/* ── 4. News Section ── */
.news {
  position: relative;
  background: var(--color-bg);
}

.news__bg-logo {
  position: absolute;
  inset: 0;
  background: url('../../media/logoNoBg.png') center / 55% no-repeat;
  opacity: 0.04;
  pointer-events: none;
}

/* 
  Grid layout:
  Desktop: 3 cols
    - Featured card spans col 1–2, row 1–2
    - Secondary cards: col 3, row 1 / col 3, row 2
    - Text cards: cols 1, 2, 3 on row 3
*/
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: var(--space-md);
}

/* ── News Card base ── */
.news-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.news-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-3px);
}

.news-card__img {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.news-card__img--1 { background-image: url('../../media/img1.jpeg'); }
.news-card__img--2 { background-image: url('../../media/img2.jpg');  }
.news-card__img--3 { background-image: url('../../media/img3.jpg');  }

.news-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.news-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.45;
  transition: color var(--transition-base);
}
.news-card:hover .news-card__title {
  color: var(--color-link);
}

.news-card__date {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

.news-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.7;
  margin-top: var(--space-xs);
}

/* ── Featured card: big, spans 2 cols × 2 rows ── */
.news-card--featured {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.news-card--featured .news-card__img {
  aspect-ratio: 16/9;
}
.news-card--featured .news-card__title {
  font-size: var(--fs-xl);
}

/* ── Secondary cards: image + title, col 3 ── */
.news-card--secondary {
  grid-column: 3;
}
.news-card--secondary .news-card__img {
  aspect-ratio: 16/9;
}

/* ── Text-only cards: bottom row ── */
.news-card--text {
  background: var(--color-bg-muted);
  grid-row: 3;
  justify-content: center;
}
.news-card--text .news-card__body {
  padding: var(--space-md) var(--space-md);
}
.news-card--text .news-card__title {
  font-size: var(--fs-base);
}


/* ── 5. Moments ── */
.moments {
  background: var(--color-accent-light);
}

.moments__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5em;
  margin-bottom: var(--space-lg);
}

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

.moments__img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.moments__img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-raised);
}

.moments__img.reveal.is-visible:hover { 
  transform: scale(1.05); 
}

.moments__img--1 { background-image: url('../../media/img4.jpeg'); }
.moments__img--2 { background-image: url('../../media/img5.jpeg'); }
.moments__img--3 { background-image: url('../../media/img6.jpg');  }
.moments__img--4 { background-image: url('../../media/moment4.png');  }


/* ── 6. About ── */
.about {
  background: var(--color-bg);
}

.about__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-xl);
}

.about__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.15em;
  white-space: nowrap;
  padding-top: 4px;
}

.about__text {
  border-left: 3px solid #4F89C8;
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.about__text p {
  font-size: var(--fs-sm);
  color: #383838;
  font-weight: 600;
  line-height: 1.9;
}


/* ── 7. Portal Cards ── */
.about__portals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.portal-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.portal-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-4px);
}

.portal-card__img {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.portal-card__img--1 { background-image: url('../../media/img7.jpeg'); }
.portal-card__img--2 { background-image: url('../../media/img8.jpeg'); }
.portal-card__img--3 { background-image: url('../../media/img9.jpeg'); }

.portal-card__label {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary);
  transition: background var(--transition-base), color var(--transition-base);
}
.portal-card:hover .portal-card__label {
  background: var(--color-bg-hover);
  color: var(--color-link);
}


/* ── 8. Simulator Section ── */
.simulator {
  background:
    radial-gradient(circle at 10% 20%, rgba(17, 138, 203, 0.12), transparent 44%),
    radial-gradient(circle at 90% 80%, rgba(36, 75, 142, 0.16), transparent 38%),
    linear-gradient(135deg, #f6faff 0%, #edf3ff 100%);
}

.simulator__card {
  border: 1px solid rgba(53, 109, 207, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.simulator__eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.simulator__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.2;
  color: var(--color-primary);
}

.simulator__desc {
  max-width: 760px;
  color: #3a4b63;
  font-size: var(--fs-base);
}
.simulator__actions {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.simulator__actions .btn {
  min-width: 160px;
  justify-content: center;
}


/* ── 9. Responsive Breakpoints (page-specific) ── */

/* ─── Tablet (≤1024px) ─── */
@media (max-width: 1024px) {

  /* News: 2-col grid, featured full width */
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .news-card--featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .news-card--secondary {
    grid-column: auto;
  }
  .news-card--text {
    grid-row: auto;
  }

  /* Moments: 2×2 */
  .moments__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About: stack */
  .about__intro {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .about__title {
    white-space: normal;
  }

  /* Portal cards: still 3 col, but tighter */
  .portal-card__img {
    aspect-ratio: 1/1;
  }

  .simulator__card {
    padding: var(--space-lg);
  }
}

/* ─── Mobile (≤768px) ─── */
@media (max-width: 768px) {

  /* Hero */
  .hero {
    min-height: 85svh;
    padding-bottom: var(--space-xl);
    align-items: flex-end;
  }
  .hero__content {
    margin-inline: var(--space-md);
  }
  .hero__title {
    letter-spacing: 0.1em;
  }

  /* News: single col */
  .news__grid {
    grid-template-columns: 1fr;
  }
  .news-card--featured {
    grid-column: 1;
  }

  /* Moments: 2 col */
  .moments__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .moments__title {
    font-size: var(--fs-xl);
    letter-spacing: 0.3em;
  }

  /* About portals: single col */
  .about__portals {
    grid-template-columns: 1fr;
  }
  .portal-card__img {
    aspect-ratio: 16/9;
  }

  .simulator__desc {
    font-size: var(--fs-sm);
  }
}

/* ─── Small mobile (≤480px) ─── */
@media (max-width: 480px) {
  .moments__grid {
    grid-template-columns: 1fr;
  }
}