/* ==============================
   JSUOG 2027 Overview CSS
   Soft Poster-Matched Version
============================== */

:root {
  --color-primary: #1F3468;
  --color-primary-soft: #4F70B8;
  --color-secondary: #BFD5F6;
  --color-secondary-light: #EAF2FF;
  --color-bg: #F8FAFD;
  --color-bg-warm: #F7F4EC;
  --color-accent: #C9B97A;

  --color-text: #33415C;
  --color-text-light: #667085;
  --color-white: #FFFFFF;

  --border-soft: rgba(191, 213, 246, 0.75);
  --shadow-soft: 0 8px 24px rgba(31, 52, 104, 0.08);
  --shadow-hover: 0 12px 30px rgba(31, 52, 104, 0.13);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
}

/* ==============================
   Overview Start
============================== */

/* ==============================
   Page Title
============================== */

.greeting-title {
  position: relative;

  margin: 24px 0 28px;
  padding-bottom: 14px;

  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;

  color: var(--color-primary);
}

.greeting-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100px;
  height: 3px;

  border-radius: 999px;

  background: linear-gradient(90deg,
      var(--color-primary-soft),
      var(--color-secondary),
      var(--color-accent));
}

/* ==============================
   Info Block
============================== */

.info-block {
  margin-bottom: 22px;

  overflow: hidden;

  background: linear-gradient(135deg,
      var(--color-white),
      var(--color-bg));

  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-soft);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.info-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-secondary);
}

/* ==============================
   Heading
============================== */

.info-heading {
  padding: 14px 18px;

  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;

  color: var(--color-primary);

  background: linear-gradient(135deg,
      var(--color-secondary-light),
      var(--color-white));

  border-bottom: 1px solid var(--border-soft);
}

/* ==============================
   Content
============================== */

.info-content {
  padding: 18px;

  font-size: 1.05rem;
  line-height: 1.85;

  color: var(--color-text);
  font-weight: 600;
}

.normal-weight {
  font-weight: 400;
}

/* ==============================
   Links
============================== */

.info-content a {
  color: var(--color-primary-soft);

  text-decoration: underline;
  text-underline-offset: 3px;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

.info-content a:hover {
  color: var(--color-primary);
  opacity: 0.9;
}

/* ==============================
   Strong Text
============================== */

.info-content strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* ==============================
   Responsive
============================== */

@media screen and (max-width: 768px) {

  .greeting-title {
    font-size: 1.55rem;
  }

  .info-heading {
    font-size: 1.05rem;
    padding: 12px 15px;
  }

  .info-content {
    font-size: 0.97rem;
    padding: 14px 15px;
    line-height: 1.75;
  }
}

@media screen and (max-width: 480px) {

  .greeting-title {
    font-size: 1.4rem;
  }

  .info-heading {
    font-size: 1rem;
  }

  .info-content {
    font-size: 0.93rem;
    padding: 12px 14px;
  }
}

/* ==============================
   Accessibility
============================== */

@media (prefers-reduced-motion: reduce) {

  .info-block,
  .info-content a {
    transition: none;
  }
}

/* ==============================
   Overview End
============================== */