/* =====================================================================
   Accreditation List — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/#group-list-component-accredit
   Flexbox, not the shared grid utility (this pattern isn't a grid — it's
   a 2-item row that switches from stacked to side-by-side at tablet).
   Colors/typography use wp-content/mu-plugins/cuhk-shared/variables.css
   tokens (--util-700, --heading-purple) — confirmed identical to the
   style guide's own --Content-Grey-2 / --Heading-Purple.

   Verified against the full cascade the style guide actually loads
   (modern-normalize.min.css -> base.css -> components.css), not just
   components.css's .accredit rules in isolation. base.css sets two
   GLOBAL defaults that components.css relies on and never re-declares,
   which this file was missing:
     a { text-decoration: none; color: var(--Heading-Purple); }
     a:hover { text-decoration: underline; }
     p, .bullet { margin-bottom: 1.4em; }
   i.e. links are NOT underlined by default (hover-only), and paragraphs
   carry a 1.4em bottom margin unless a component explicitly zeroes it
   (.accredit doesn't). Both are made explicit below instead of assumed,
   since we can't rely on WordPress/TT5's own global styles matching
   base.css's cascade exactly.

   base.css's body font-size/line-height are ALSO responsive, and
   components.css never redeclares them for .accredit either — same
   diff-against-baseline pattern:
     base:     font-size 16px / line-height 26px (already had this)
     >=1024px: line-height 24px (font-size unchanged)
     >=1440px: font-size 24px / line-height 36px  <- was missing entirely
   Explicit per-breakpoint below rather than left to inherit, for the
   same reason as above.

   Converted from raw HTML to native blocks (wp:group/wp:image/wp:paragraph)
   for Pattern Overrides support — see cuhk-migrate/lib.php's 'blocks' wrap
   mode. This changes ONE structural thing: core/image applies its
   className to the wrapping <figure>, not the inner <img> (WordPress's own
   convention, not our choice) — .accredit__img now targets that figure,
   with a plain `img` descendant selector for the actual sizing.
   ===================================================================== */
.accredit {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: 30px;
	font-family: "Myriad Pro", "Noto Sans TC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
}
.accredit__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	text-align: center;
}
.accredit .accredit__item p {
	color: var(--util-700);
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	margin: 0 0 1.4em; /* base.css: p, .bullet { margin-bottom: 1.4em } */
	margin-block-end: 1.4em;
	/* WP's theme.json global styles include
	   `:root :where(.wp-block-group-is-layout-flow) > :last-child { margin-
	   block-end: 0 }`. :where() zeroes ONLY its own argument's contribution
	   — :root and :last-child sit OUTSIDE it and still count normally, so
	   the real specificity is (0,2,0), which beat our original
	   `.accredit__item p` at (0,1,1). Two fixes needed together: match
	   their logical property (margin-block-end, not just the `margin`
	   shorthand — browsers resolve logical/physical longhands via a
	   separate mapping, not pure specificity, once both are declared) AND
	   add the `.accredit` ancestor to reach (0,2,1), which safely wins. */
}
.accredit__item p a {
	color: var(--heading-purple);
	text-decoration: none; /* base.css: a { text-decoration: none } — hover-only */
}
.accredit__item p a:hover {
	text-decoration: underline; /* base.css: a:hover { text-decoration: underline } */
}
.accredit__img { display: block; width: auto; margin: 0; }
.accredit__img img { display: block; width: 100%; height: 100%; }
.accredit__img--amba { max-width: 298px; }
.accredit__img--aacsb { max-width: 246px; }

@media (min-width: 48rem) { /* 768px */
	.accredit { flex-direction: row; justify-content: space-evenly; }
	.accredit__item { max-width: 272px; }
}

@media (min-width: 64rem) { /* 1024px */
	.accredit { justify-content: center; gap: 146px; margin-top: 40px; }
	.accredit__item { max-width: 272px; gap: 36px; }
	.accredit .accredit__item p { line-height: 24px; } /* base.css body line-height @1024px; matches .accredit__item p's raised specificity above, see its comment */
	.accredit__img { width: 190px; max-width: 100%; height: 64px; }
	.accredit__img img { object-fit: contain; }
	.accredit__img--amba { transform: translateY(10%); }
}

@media (min-width: 90rem) { /* 1440px */
	.accredit { gap: 294px; margin-top: 65px; }
	.accredit__item { max-width: 550px; gap: 75px; }
	.accredit .accredit__item p { font-size: 24px; line-height: 36px; } /* base.css body @1440px; same specificity note as above */
	.accredit__img { width: 455px; height: 152px; }
	.accredit__img--amba { transform: translateY(15%); }
}