/* =====================================================================
   Vision & Mission List — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/#group-list-component-advantage
   Fetched as a standalone component fragment (not through the guide
   page's own 1006px iframe, which would hide the >=1024px/1440px rules
   entirely — see AUDIT_CHECKLIST.md).

   Cascade audit (base.css) applied per AUDIT_CHECKLIST.md — this pattern
   has an <h3> and <p>, neither styled within components.css's .advantage
   block itself, both relying entirely on base.css globals:
     h3   base: 16px/700/22px, margin-bottom 15px
          >=1024px: line-height 24px only
          >=1440px: 26px/600/40px, margin-bottom 22px
     p    base: 16px/300/26px, margin-bottom 1.4em (from earlier patterns)
          >=1024px: line-height 24px only (font-size unchanged)
          >=1440px: 24px/36px
     h3 has NO color override in base.css (unlike h1/h2 which get
     --Heading-Purple) — it inherits body's --Content-Grey-2/our
     --util-700. Don't accidentally give it the heading-purple color.

   Grid breakpoint is 1024px here, NOT 768px/1440px like cuhk-shared/
   grid.css assumes (verified against .person/.talent/.media/.contact
   when that utility was built) — so this pattern does NOT consume the
   shared grid utility; using it would change columns at the wrong
   breakpoint. Written directly instead.

   .advantage__icon is an <img src="....svg"> (not inline <svg>), confirmed
   from the actual reference markup — matches the dev note "allow user to
   upload the .svg icons," since an <img> src is swappable via the Media
   Library; inline SVG wouldn't be.

   No .advantage__img (the large secondary illustration) block/rule here —
   it's display:none at EVERY breakpoint in the live style guide, i.e.
   never actually shown. An earlier pass both kept it in the pattern
   markup AND had CSS flip it to display:block at >=768px, which was wrong
   twice over (caught 2026-07-04: real thumbnails were rendering where the
   reference shows none). Per-project rule now: an element that's
   permanently display:none in the reference doesn't belong in the pattern
   at all — leave it out of the block markup rather than including it
   hidden. See AUDIT_CHECKLIST.md.
   ===================================================================== */
.advantage__list {
	display: grid;
	gap: 15px;
}
/* .advantage__list > .advantage / .advantage > .advantage__content: WP's
   global style ":root :where(.wp-block-group-is-layout-flow) > *
   { margin-block-start: var(--wp--preset--spacing--20) }" (~10px) applies
   to every non-first child of a flow-layout group — including these,
   since .advantage__list/.advantage keep the default is-layout-flow class
   (no explicit 'layout' attr, same as elsewhere in this pattern/
   Accreditation). Same specificity (0,1,0) as our own class selectors
   would need raising to beat: caught here because it made the 2nd .advantage
   in each grid row 10px shorter than the 1st (the extra margin-top eats
   into the CSS Grid stretch allocation) — this pattern's own spacing is
   fully handled by 'gap' already, so this default needs zeroing, not just
   overriding to a different value. */
.advantage__list > .advantage {
	margin-block-start: 0;
}
.advantage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 40px 30px;
	background: #f7f7f7;
	font-family: "Myriad Pro", "Noto Sans TC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
}
.advantage__icon {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 30px;
	height: auto;
}
.advantage > .advantage__content {
	flex: 1;
	margin-block-start: 0;
}
.advantage__content h3 {
	color: var(--util-700);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	margin: 0 0 15px;
}
/* .advantage .advantage__content p (not just .advantage__content p): raised
   specificity above theme.json's global
   ":root :where(.wp-block-group-is-layout-flow) > :last-child
   { margin-block-end: 0 }" (real specificity (0,2,0), applies here because
   this <p> is the last child of the .advantage__content group block, which
   core/group renders as is-layout-flow even with no explicit 'layout' attr
   — same conflict as the Accreditation pattern, see AUDIT_CHECKLIST.md).
   margin-block-end set explicitly alongside the margin shorthand since
   logical/physical properties resolve separately, not by pure specificity.
   Same raised selector used consistently in the responsive overrides below
   so they keep winning by source order instead of losing to this rule's
   now-higher specificity (the self-inflicted regression from Accreditation
   — fixed proactively here, not after a failed verify run). */
.advantage .advantage__content p {
	color: var(--util-700);
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	margin: 0 0 1.4em;
	margin-block-end: 1.4em;
}

@media (min-width: 48rem) { /* 768px */
	.advantage {
		flex-direction: row;
		align-items: flex-start;
	}
}

@media (min-width: 64rem) { /* 1024px */
	.advantage__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.advantage {
		padding: 40px 20px;
	}
	.advantage__icon {
		width: 35px;
	}
	.advantage__content h3 { line-height: 24px; }
	.advantage .advantage__content p { line-height: 24px; }
}

@media (min-width: 90rem) { /* 1440px */
	.advantage__list {
		gap: 25px;
	}
	.advantage {
		padding: 50px 30px;
	}
	.advantage__icon {
		top: 20px;
		right: 20px;
		width: 50px;
	}
	.advantage__content h3 {
		font-size: 26px;
		font-weight: 600;
		line-height: 40px;
		margin-bottom: 22px;
	}
	.advantage .advantage__content p {
		font-size: 24px;
		line-height: 36px;
	}
}