/**
 * NDHU Economics Website
 * Shared Classification Page Header
 * page-header.css v1.3
 *
 * Approved classification families:
 *   1. About Us
 *   2. Admission
 *   3. Undergraduate
 *   4. Graduate
 *   5. Regulations
 *
 * Design Guide reference: v1.8
 *
 * Change Log
 * ---------------------------------------------------------
 * v1.3 | 2026-08-08 (UTC+8)
 * - Moved the Undergraduate and Graduate gold accent rule to
 *   the bottom edge of the full Page Header.
 * - Removed the original title-band gold-line pseudo-elements.
 * - Retained square top corners and rounded bottom corners for
 *   Undergraduate and Graduate headers adjoining the navigation bar.
 *
 * v1.2 | 2026-08-08 (UTC+8)
 * - Applied full-header background images to Undergraduate and Graduate.
 * - Added translucent navy title bands with transparent visual spacers.
 * - Used opposite TITLE → VISUAL and PHOTO → TITLE compositions.
 *
 * ---------------------------------------------------------
 * Recommended page-root usage
 * ---------------------------------------------------------
 *
 * <div class="myxxx-page mycustom-title-page">
 *   <header class="mypagehead mypagehead-undergrad">
 *     ...
 *   </header>
 *   ...
 * </div>
 *
 * The page root uses .mycustom-title-page so Rpage's system title
 * can be hidden only on pages that already have their own semantic <h1>.
 *
 * ---------------------------------------------------------
 * Image / graphic asset usage
 * ---------------------------------------------------------
 *
 * Photo/graphic-based families can set assets with a CSS custom property:
 *
 * style="--mypagehead-image:url('...');"
 *
 * or via a page-specific stylesheet:
 *
 * .myxxx-page .mypagehead {
 *   --mypagehead-image:url('...');
 * }
 *
 * Chinese / English pages should share the same structure and stylesheet.
 */

/* =========================================================
   00. Rpage system-title transition
   ========================================================= */

.page_mobileptdetail:has(.mycustom-title-page) .mpgtitle {
  display: none !important;
}

/* =========================================================
   01. Shared variables
   ========================================================= */

.mypagehead {
  --mypagehead-navy: #2E4B70;
  --mypagehead-navy-dark: #17324D;
  --mypagehead-navy-deep: #10263C;
  --mypagehead-gold: #AA8B5A;
  --mypagehead-gold-bright: #D4AF37;

  --mypagehead-white: #FFFFFF;
  --mypagehead-paper: #F7F7F5;
  --mypagehead-soft: #EEF2F5;
  --mypagehead-line: #D7DEE6;
  --mypagehead-text: #414141;
  --mypagehead-muted: #6B7280;

  --mypagehead-radius: 0.8rem;
  --mypagehead-shadow: 0 0.5rem 1.6rem rgba(30, 52, 74, 0.10);

  --mypagehead-title-size: clamp(2.8rem, 4.2vw, 4.4rem);
  --mypagehead-subtitle-size: clamp(1.25rem, 1.8vw, 1.55rem);
  --mypagehead-kicker-size: 1.05rem;

  --mypagehead-visual-h: 21rem;
  --mypagehead-band-h: 8.8rem;

  position: relative;
  width: 100%;
  margin: 0 0 2.4rem;
  overflow: hidden;
  color: var(--mypagehead-text);
  background: var(--mypagehead-white);
  border-radius: var(--mypagehead-radius);
  box-shadow: var(--mypagehead-shadow);
  font-family: "Noto Sans TC", "Noto Sans", sans-serif;
}

.mypagehead *,
.mypagehead *::before,
.mypagehead *::after {
  box-sizing: border-box;
}

.mypagehead h1,
.mypagehead p {
  margin-top: 0;
}

.mypagehead h1 {
  margin-bottom: 0;
  font-weight: 800;
  line-height: 1.2;
}

.mypagehead-kicker {
  margin: 0 0 0.5rem;
  color: var(--mypagehead-gold);
  font-size: var(--mypagehead-kicker-size);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mypagehead-title {
  margin: 0;
  font-size: var(--mypagehead-title-size);
  letter-spacing: 0.02em;
}

.mypagehead-en {
  margin: 0.45rem 0 0;
  font-size: var(--mypagehead-subtitle-size);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.mypagehead-desc {
  margin: 0.75rem 0 0;
  font-size: 1.35rem;
  line-height: 1.75;
}

.mypagehead-rule {
  display: block;
  width: 6rem;
  height: 0.3rem;
  margin-top: 1rem;
  background: var(--mypagehead-gold);
  border: 0;
}

.mypagehead-visual {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.mypagehead-band {
  display: flex;
  min-height: var(--mypagehead-band-h);
  align-items: center;
  gap: 2rem;
  padding: 1.6rem 2.4rem;
  color: var(--mypagehead-white);
  background:
    linear-gradient(135deg, rgba(16, 38, 60, 0.98), rgba(46, 75, 112, 0.95));
}

.mypagehead-band .mypagehead-title {
  color: var(--mypagehead-white);
  font-size: clamp(2.7rem, 4vw, 4.1rem);
}

.mypagehead-band .mypagehead-en,
.mypagehead-band .mypagehead-kicker {
  color: #F0C980;
}

.mypagehead-band .mypagehead-desc {
  color: rgba(255, 255, 255, 0.92);
}

.mypagehead-band-main {
  min-width: 0;
}

.mypagehead-band-meta {
  margin-left: auto;
  text-align: right;
}

.mypagehead-band-icon {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--mypagehead-gold-bright);
  font-size: 4rem;
  opacity: 0.95;
}

/* =========================================================
   02. ABOUT US
   Left typography + right faded architecture
   ========================================================= */

.mypagehead-about {
  display: grid;
  min-height: 21rem;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 48%, #F5F6F7 100%);
}

.mypagehead-about-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.4rem 2.8rem;
}

.mypagehead-about .mypagehead-title {
  color: var(--mypagehead-navy-dark);
  font-family: "Noto Serif TC", serif;
}

.mypagehead-about-visual {
  position: relative;
  min-height: 21rem;
  background-image:
    linear-gradient(
      90deg,
      #FFFFFF 0%,
      rgba(255,255,255,0.88) 15%,
      rgba(255,255,255,0.28) 55%,
      rgba(255,255,255,0.05) 100%
    ),
    var(--mypagehead-image);
  background-position: center;
  background-size: cover;
}

.mypagehead-about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(238, 242, 245, 0.08);
  pointer-events: none;
}

/* =========================================================
   03. ADMISSION
   Left photo + right navy diagonal title field
   ========================================================= */

.mypagehead-admission {
  display: grid;
  min-height: 21rem;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  color: var(--mypagehead-white);
  background: var(--mypagehead-navy-deep);
}

.mypagehead-admission-visual {
  min-height: 21rem;
  background-image: var(--mypagehead-image);
  background-position: center;
  background-size: cover;
}

.mypagehead-admission-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 21rem;
  flex-direction: column;
  justify-content: center;
  padding: 2.4rem 3rem 2.4rem 4.4rem;
  color: var(--mypagehead-white);
  background:
    linear-gradient(135deg, var(--mypagehead-navy-dark), var(--mypagehead-navy-deep));
}

.mypagehead-admission-copy::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5rem;
  width: 6rem;
  background: var(--mypagehead-navy-dark);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.mypagehead-admission .mypagehead-title {
  color: var(--mypagehead-white);
}

.mypagehead-admission .mypagehead-desc {
  color: rgba(255,255,255,0.92);
}

/* =========================================================
   Undergraduate / Graduate Page Header
   上緣直角、下緣圓角設計
   ---------------------------------------------------------
   說明：
   學士班與研究所 Page Header 緊接於網站主導覽列下方。
   為避免方形主導覽列下方再接一個四角圓角卡片，
   將 Page Header 上方兩角改為直角，
   下方兩角仍保留圓角，維持進入正文時的柔和收尾。
   ========================================================= */

.mypagehead-undergrad,
.mypagehead-grad {
  border-radius: 0 0 10px 10px;  /* 左上、右上直角；右下、左下保留 10px 圓角 */
  border-bottom: 0.28rem solid var(--mypagehead-gold-bright);  /* 金線統一置於整個 Page Header 最下緣 */
}


/* =========================================================
   04. UNDERGRADUATE
   TITLE → VISUAL
   Full-header background image + translucent title overlay on top
   Gold rule at the BOTTOM edge of the full Page Header
   ========================================================= */

.mypagehead-undergrad {
  --mypagehead-undergrad-teal: #2B8C88;
  --mypagehead-undergrad-cyan: #5BB6D0;
  --mypagehead-undergrad-orange: #E88952;
  --mypagehead-undergrad-yellow: #E3B449;

  display: flex;
  flex-direction: column;
  background-color: var(--mypagehead-paper);
  background-image: var(--mypagehead-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.mypagehead-undergrad .mypagehead-band {
  position: relative;
  order: 1;
  min-height: 6.9rem;
  padding: 1.15rem 2.4rem 1.25rem;
  background: rgba(16, 38, 60, 0.76);
  border: 0;
  backdrop-filter: saturate(115%) blur(1.5px);
  -webkit-backdrop-filter: saturate(115%) blur(1.5px);
}


.mypagehead-undergrad-visual {
  order: 2;
  min-height: var(--mypagehead-visual-h);
  background: transparent;
}


/* =========================================================
   05. GRADUATE
   PHOTO → TITLE
   Full-header daytime research image + translucent title overlay below
   Gold rule at the BOTTOM edge of the full Page Header
   ========================================================= */

.mypagehead-grad {
  display: flex;
  flex-direction: column;
  background-color: var(--mypagehead-white);
  background-image: var(--mypagehead-image);
  background-position: center 45%;
  background-repeat: no-repeat;
  background-size: cover;
}

.mypagehead-grad-visual {
  order: 1;
  min-height: var(--mypagehead-visual-h);
  background: transparent;
}

.mypagehead-grad .mypagehead-band {
  position: relative;
  order: 2;
  min-height: 6.9rem;
  padding: 1.15rem 2.4rem 1.25rem;
  background: rgba(16, 38, 60, 0.76);
  border: 0;
  backdrop-filter: saturate(115%) blur(1.5px);
  -webkit-backdrop-filter: saturate(115%) blur(1.5px);
}



/* Shared academic-program title typography */

.mypagehead-undergrad .mypagehead-band-main,
.mypagehead-grad .mypagehead-band-main {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.45rem;
}

.mypagehead-undergrad .mypagehead-title,
.mypagehead-grad .mypagehead-title {
  margin: 0;
  font-size: clamp(2.55rem, 3.5vw, 3.7rem);
  line-height: 1.1;
}

.mypagehead-undergrad .mypagehead-subline,
.mypagehead-grad .mypagehead-subline {
  margin: 0;
  color: #F0C980;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.mypagehead-undergrad .mypagehead-band-icon,
.mypagehead-grad .mypagehead-band-icon {
  margin-left: auto;
  font-size: 2.8rem;
  opacity: 0.72;
}

/* Compact academic-program headers */
.mypagehead-undergrad.mypagehead-compact,
.mypagehead-grad.mypagehead-compact {
  --mypagehead-visual-h: 16.5rem;
  --mypagehead-band-h: 6.9rem;
}

/* =========================================================
   06. REGULATIONS
   No-photo typographic / administrative graphic
   ========================================================= */

.mypagehead-regulations {
  position: relative;
  display: grid;
  min-height: 20rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 2.4rem 3rem;
  background:
    linear-gradient(135deg, rgba(46,75,112,0.04), rgba(255,255,255,0.96)),
    repeating-linear-gradient(
      135deg,
      rgba(46,75,112,0.035) 0,
      rgba(46,75,112,0.035) 2.6rem,
      transparent 2.6rem,
      transparent 5.2rem
    ),
    #F8FAFC;
  border: 1px solid #E2E8EF;
  box-shadow: none;
}

.mypagehead-regulations::after {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  width: 28%;
  height: 100%;
  opacity: 0.45;
  background:
    linear-gradient(
      135deg,
      transparent 0 34%,
      rgba(46,75,112,0.06) 34% 46%,
      transparent 46% 58%,
      rgba(170,139,90,0.07) 58% 70%,
      transparent 70%
    );
  pointer-events: none;
}

.mypagehead-regulations-copy {
  position: relative;
  z-index: 2;
}

.mypagehead-regulations .mypagehead-title {
  color: var(--mypagehead-navy-dark);
}

.mypagehead-regulations-icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 8rem;
  height: 8rem;
  place-items: center;
  color: var(--mypagehead-navy);
  font-size: 4.5rem;
  opacity: 0.9;
}

/* =========================================================
   07. Optional compact variant
   Use only when a page requires a shorter header.
   ========================================================= */

.mypagehead-compact {
  --mypagehead-visual-h: 18rem;
  --mypagehead-band-h: 7.8rem;
}

.mypagehead-compact.mypagehead-about,
.mypagehead-compact .mypagehead-about-visual,
.mypagehead-compact.mypagehead-admission,
.mypagehead-compact .mypagehead-admission-copy,
.mypagehead-compact .mypagehead-admission-visual {
  min-height: 18rem;
}

/* =========================================================
   08. Responsive
   ========================================================= */

@media screen and (max-width: 900px) {
  .mypagehead {
    --mypagehead-visual-h: 18rem;
    --mypagehead-band-h: 8.2rem;
  }

  .mypagehead-band {
    gap: 1.2rem;
    padding: 1.45rem 1.8rem;
  }

  .mypagehead-band-icon {
    font-size: 3.2rem;
  }

  /* About keeps its editorial identity but uses a tighter split. */
  .mypagehead-about {
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  }

  .mypagehead-about-copy {
    padding: 2rem;
  }

  /* Admission reduces diagonal overlap. */
  .mypagehead-admission {
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  }

  .mypagehead-admission-copy {
    padding: 2rem 2rem 2rem 3.4rem;
  }

  .mypagehead-admission-copy::before {
    left: -3.6rem;
    width: 4.4rem;
  }
}

@media screen and (max-width: 640px) {
  .mypagehead {
    --mypagehead-title-size: clamp(2.35rem, 8vw, 3.2rem);
    --mypagehead-subtitle-size: 1.2rem;
    --mypagehead-visual-h: 14rem;
    --mypagehead-band-h: auto;

    margin-bottom: 1.8rem;
    border-radius: 0.65rem;
  }

  /* Undergraduate / Graduate:
     緊接網站主導覽列，因此手機版同樣維持
     上方直角、下方圓角，避免 RWD 共用設定
     將四個角重新改為圓角。 */
  .mypagehead-undergrad,
  .mypagehead-grad {
    border-radius: 0 0 0.65rem 0.65rem;
  }
  
  .mypagehead-desc {
    margin-top: 0.55rem;
    font-size: 1.2rem;
    line-height: 1.65;
  }

  .mypagehead-kicker {
    font-size: 0.95rem;
  }

  .mypagehead-rule {
    width: 4.5rem;
    margin-top: 0.75rem;
  }

  .mypagehead-band {
    min-height: 0;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.35rem 1.4rem;
  }

  .mypagehead-band .mypagehead-title {
    font-size: clamp(2.25rem, 8vw, 3rem);
  }

  .mypagehead-band-meta {
    margin-left: 0;
    text-align: left;
  }

  .mypagehead-band-icon {
    align-self: center;
    margin-left: auto;
    font-size: 2.6rem;
  }

  /* About:
     Stack copy over image; retain the editorial fade rather than
     converting to a generic photo hero. */
  .mypagehead-about {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .mypagehead-about-copy {
    min-height: 0;
    padding: 1.5rem 1.4rem 1.25rem;
  }

  .mypagehead-about-visual {
    min-height: 13rem;
    background-image:
      linear-gradient(
        0deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.35)
      ),
      var(--mypagehead-image);
  }

  /* Admission:
     Mobile becomes image first, title field second;
     no diagonal clip on narrow screens. */
  .mypagehead-admission {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .mypagehead-admission-visual {
    min-height: 13rem;
  }

  .mypagehead-admission-copy {
    min-height: 0;
    padding: 1.4rem;
  }

  .mypagehead-admission-copy::before {
    display: none;
  }

  /* Undergraduate / Graduate:
     preserve TITLE → VISUAL and PHOTO → TITLE on mobile. */
  .mypagehead-undergrad .mypagehead-band,
  .mypagehead-grad .mypagehead-band {
    min-height: 0;
    padding: 1rem 1.35rem 1.15rem;
    background: rgba(16, 38, 60, 0.88);
  }

  .mypagehead-undergrad .mypagehead-band-main,
  .mypagehead-grad .mypagehead-band-main {
    display: block;
  }

  .mypagehead-undergrad .mypagehead-title,
  .mypagehead-grad .mypagehead-title {
    font-size: clamp(2.15rem, 7.4vw, 2.9rem);
  }

  .mypagehead-undergrad .mypagehead-subline,
  .mypagehead-grad .mypagehead-subline {
    margin-top: 0.35rem;
    font-size: 1.12rem;
  }

  .mypagehead-undergrad .mypagehead-band-icon,
  .mypagehead-grad .mypagehead-band-icon {
    font-size: 2.2rem;
    opacity: 0.6;
  }

  .mypagehead-undergrad-visual,
  .mypagehead-grad-visual {
    min-height: 12.5rem;
  }

  .mypagehead-regulations {
    min-height: 0;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1.5rem 1.4rem;
  }

  .mypagehead-regulations-icon {
    width: 5rem;
    height: 5rem;
    font-size: 3.1rem;
  }
}

@media screen and (max-width: 420px) {
  .mypagehead-band {
    flex-wrap: wrap;
  }

  .mypagehead-band-icon {
    display: none;
  }

  .mypagehead-undergrad .mypagehead-band-icon,
  .mypagehead-grad .mypagehead-band-icon {
    display: none;
  }

  .mypagehead-regulations {
    grid-template-columns: 1fr;
  }

  .mypagehead-regulations-icon {
    display: none;
  }
}

/* =========================================================
   09. Accessibility / motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .mypagehead *,
  .mypagehead *::before,
  .mypagehead *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   10. Print fallback
   ========================================================= */

@media print {
  .mypagehead {
    box-shadow: none;
    border: 1px solid #D8DDE3;
  }

  .mypagehead-about-visual,
  .mypagehead-admission-visual,
  .mypagehead-undergrad-visual,
  .mypagehead-grad-visual {
    background-image: none !important;
    background-color: #F4F4F4 !important;
  }

  .mypagehead-band,
  .mypagehead-admission-copy {
    color: #111 !important;
    background: #EEE !important;
  }

  .mypagehead-band .mypagehead-title,
  .mypagehead-band .mypagehead-en,
  .mypagehead-band .mypagehead-desc,
  .mypagehead-admission .mypagehead-title,
  .mypagehead-admission .mypagehead-desc {
    color: #111 !important;
  }
}

/* =========================================================
   v1.3 implementation note
   ---------------------------------------------------------
   Undergraduate and Graduate use the SAME background image
   across the full Page Header. Their visual spacer is transparent,
   allowing the translucent navy title band to reveal the image below.

   Both academic-program headers now use one shared gold accent rule
   at the BOTTOM edge of the entire Page Header.

   Undergraduate: TITLE → VISUAL → GOLD RULE
   Graduate:      PHOTO → TITLE  → GOLD RULE

   The top corners remain square so the Page Header can visually join
   the site's rectangular navigation bar; the bottom corners remain
   rounded for a softer transition into page content.
   ========================================================= */