/* Theme 2 (OCIO, request 1104-T2): restyle of existing library components. No new components, same markup.
   Everything is scoped to :root[data-direction=two]; Theme 1 pages never match these rules.
   References (user-provided): Hannan University admissions (eduhk.hk/ocio direction: inset header, square
   "More" buttons with a long arrow, dated rows), UZUZ college blog (orange heading bars, rules, highlight tint). */

/* ---------------------------------------------------------------- base: page, type */
:root[data-direction=two] body,
:root[data-direction=two] .site,
:root[data-direction=two] .shell-site{background:var(--edu-surface-muted);color:var(--edu-text)}
:root[data-direction=two] .site,
:root[data-direction=two] .site *,
:root[data-direction=two] .shell-site,
:root[data-direction=two] :is(.shell-site,.t2-home) *{font-family:"Shell Latin Quotes",var(--edu-font-body)}
:root[data-direction=two] .site,
:root[data-direction=two] .shell-site{font-size:16px;line-height:1.9;letter-spacing:var(--edu-tracking-body)}
/* Library pieces read these: re-point the shell / Service Landing palette to Theme 2 */
:root[data-direction=two] .shell-site,
:root[data-direction=two] .home-block,
:root[data-direction=two] [data-home-layout]{--ocio-paper:#F5F4F0;--ocio-ink:#202723;--ocio-muted:#5C5F5B;--ocio-line:#E3E1DB;--shell-ink:#202723;--shell-muted:#5C5F5B;--shell-line:#E3E1DB}
:root[data-direction=two] [data-home-layout="home-story"]{background:var(--edu-surface-muted);color:var(--edu-text)}
:root[data-direction=two] :is(.site,.shell-site) :focus-visible{outline:2px solid var(--edu-focus-ring);outline-offset:2px}

/* H1 40 / 30 */
:root[data-direction=two] .site-title,
:root[data-direction=two] :is(.shell-site,.t2-home) h1.ocio-heading{font-size:var(--edu-text-4xl);line-height:var(--edu-leading-4xl);font-weight:700;letter-spacing:0}
/* H2 28/700 with a 4px orange bar (UZUZ) */
:root[data-direction=two] :is(.rich,.split-content>div)>h2,
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-article>h2,
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-block-title,
:root[data-direction=two] .site-main>h2{position:relative;font-size:var(--edu-text-2xl);line-height:var(--edu-leading-2xl);font-weight:700;letter-spacing:.02em;color:var(--edu-text);padding:0 0 0 16px;border:0;border-left:4px solid var(--edu-brand-accent);border-radius:0}
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-article>h2{margin-top:56px;padding-top:0;border-top:0}
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-article>h2:first-child{margin-top:0}
/* H3 22/700, full-width 1px rule with a 48px orange segment at the start */
/* Long-form only: headings that are direct children of rich text / an article column / a C04 text side.
   Component headings (news rows, cards, contact, FAQ, notices) keep their own style. */
:root[data-direction=two] :is(.rich,.split-content>div)>h3,
:root[data-direction=two] .site-main>h3{font-size:var(--edu-text-xl);line-height:var(--edu-leading-xl);font-weight:700;letter-spacing:.02em;color:var(--edu-text);padding:0 0 12px;margin:40px 0 20px;background:linear-gradient(var(--edu-brand-accent),var(--edu-brand-accent)) left bottom/48px 2px no-repeat,linear-gradient(var(--edu-border),var(--edu-border)) left bottom/100% 1px no-repeat}
:root[data-direction=two] .rich .split-content>div>h3:first-child{margin-top:0}
:root[data-direction=two] .rich :is(p,li):not(.contact-card *){font-size:16px;line-height:1.9;letter-spacing:var(--edu-tracking-body);color:var(--edu-text)}
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-article>:is(p,ul,ol){max-width:var(--edu-reading-max)}
/* Key-point highlight: pale orange tint behind the text, text stays #202723 */
:root[data-direction=two] mark,
:root[data-direction=two] .rich mark{background:linear-gradient(transparent 45%,var(--edu-accent-tint) 45%);color:var(--edu-text);padding:0 2px}

/* ---------------------------------------------------------------- bilingual section heading (style of the section label) */
/* Plain label: small Jost caps. With .ocio-label-en: large English word + small secondary label on one baseline. */
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-label,
:root[data-direction=two] .ocio-label{font-family:var(--edu-font-display);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:none;color:var(--edu-text-muted);border:0;background:none;padding:0;border-radius:0}
:root[data-direction=two] .ocio-label:has(.ocio-label-en){display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:0 0 8px;letter-spacing:0}
:root[data-direction=two] .ocio-label-en{font-family:var(--edu-font-display);font-size:var(--edu-text-3xl);line-height:1.2;font-weight:400;letter-spacing:.01em;color:var(--edu-text)}
:root[data-direction=two] .ocio-label-sub{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--edu-text-muted)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-label:has(.ocio-label-en)+.ocio-heading{font-size:22px;font-weight:500;line-height:1.5;letter-spacing:.02em;color:var(--edu-text-muted);margin-bottom:32px}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-help .ocio-label:has(.ocio-label-en) :is(.ocio-label-en,.ocio-label-sub){color:#fff}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-help .ocio-label:has(.ocio-label-en)+.ocio-heading{color:#ffffffe6}

/* ---------------------------------------------------------------- buttons: pill (primary) and square + long arrow (More) */
:root[data-direction=two] .btn,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-button,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-header-help,
:root[data-direction=two] .ocio-filter button{border-radius:var(--edu-radius-full)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-subheading>.ocio-link,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-help-link{border-radius:var(--edu-radius-square)}
/* Long arrow on the square style (same as .btn--square in specimen.css) */
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-subheading>.ocio-link::after,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-help-link::after{content:"";flex:none;width:16px;height:16px;margin-left:16px;background:currentColor;-webkit-mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;transition:transform .2s ease}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-subheading>.ocio-link:hover::after,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-help-link:hover::after{transform:translateX(4px)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-subheading>.ocio-link>.ocio-icon,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-help-link>.ocio-icon{display:none}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-button-light:not(.shell-login-btn){min-height:44px;padding:11px 24px;background:#fff;border:1px solid var(--edu-text);color:var(--edu-text)} /* outlined pill: same shape family as the primary beside it */
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-subheading>.ocio-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:500;color:var(--edu-text);text-decoration:none}

/* ---------------------------------------------------------------- header: floating inset bar */
:root[data-direction=two] .shell-header-bar{padding:16px 24px 0;background:transparent}
:root[data-direction=two] .shell-header-bar.is-stuck{box-shadow:none}
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-header{background:#fff;border-radius:var(--t2-r-m);box-shadow:var(--edu-shadow-md);border:0}
@media (max-width:600px){
  :root[data-direction=two] .shell-header-bar{padding:0}
  :root[data-direction=two] :is(.shell-site,.t2-home) .shell-header{border-radius:0}
}
/* The inner banner and hero start under the inset bar: pull them up so the bar floats over the photo */
:root[data-direction=two] .shell-header-bar+main>.home-block:first-child>.shell-inner-banner{margin-top:0}

/* ---------------------------------------------------------------- inner banner: keep the photo, Jost label */
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-inner-banner .ocio-label{font-family:var(--edu-font-display);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#ffffffe6}
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-inner-banner .ocio-heading{color:#fff}

/* ---------------------------------------------------------------- images: 12px radius */
:root[data-direction=two] .rich img:not([data-inline]),
:root[data-direction=two] :where(.rich) .split-content>img,
:root[data-direction=two] .split-content>img,
:root[data-direction=two] .rich-figure img,
:root[data-direction=two] .contact-card,
:root[data-direction=two] .image-carousel-slide img{border-radius:var(--edu-radius-md)}

/* ---------------------------------------------------------------- cards (C05) and quick links (C06) */
:root[data-direction=two] .content-card,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-service-card,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-audience-card,
:root[data-direction=two] .quicklinks a,
:root[data-direction=two] .news-tile,
:root[data-direction=two] .x-card{background:#fff;border:0;border-radius:var(--edu-radius-md);box-shadow:none;transition:transform .2s ease,box-shadow .2s ease}
:root[data-direction=two] :is(.content-card,.ocio-service-card,.ocio-audience-card,.quicklinks a,.x-card):hover{transform:translateY(-2px);box-shadow:var(--edu-shadow-md)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-service-arrow,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-card-action>.ocio-icon{display:none}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-service-card::after,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-audience-card::after,
:root[data-direction=two] .quicklinks a::after{content:"";position:absolute;right:24px;bottom:24px;width:16px;height:16px;background:var(--edu-action-primary);-webkit-mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;transition:transform .2s ease}
:root[data-direction=two] :is(.ocio-service-card,.ocio-audience-card,.quicklinks a):hover::after{transform:translateX(4px)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-audience-card,
:root[data-direction=two] .quicklinks a{position:relative}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-audience-card{padding-bottom:56px}
:root[data-direction=two] .quicklinks a{padding-right:72px}
:root[data-direction=two] .quicklinks a>.link-icon{display:none}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-service-en{font-family:var(--edu-font-display);letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){:root[data-direction=two] :is(.content-card,.ocio-service-card,.ocio-audience-card,.quicklinks a,.x-card){transition:none}:root[data-direction=two] :is(.content-card,.ocio-service-card,.ocio-audience-card,.quicklinks a,.x-card):hover{transform:none}}

/* ---------------------------------------------------------------- news / update rows (C15, OCIO News) */
/* Date (12px muted) above the title, long arrow on the right, 1px divider */
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-update-row{grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"date arrow" "title arrow";row-gap:4px;column-gap:24px;padding:20px 0;border-bottom:1px solid var(--edu-border)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-update-row>.ocio-update-category{grid-area:date;font-family:var(--edu-font-display);font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--edu-text-muted)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-update-row>div{grid-area:title}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-update-row h4{margin:0;font-size:16px;font-weight:500;line-height:1.7}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-update-row>.ocio-icon{display:none}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-update-row::after,
:root[data-direction=two] .shell-news .news-tile::after{content:"";grid-area:arrow;align-self:center;width:16px;height:16px;background:var(--edu-text);-webkit-mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;transition:transform .2s ease}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-update-row:hover::after,
:root[data-direction=two] .shell-news .news-tile:hover::after{transform:translateX(4px)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-update-row:hover h4{color:var(--edu-link);text-decoration:underline;text-underline-offset:3px}
/* OCIO News page: the C15 tiles become dated rows; the banner stays as a small 12px-radius thumbnail */
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-news{display:block;background:#fff;border-radius:var(--edu-radius-md);padding:8px 32px}
:root[data-direction=two] .shell-news .news-tile{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr) 40px;grid-template-areas:"img body arrow";align-items:center;gap:0 32px;padding:24px 0;border-radius:0;border-bottom:1px solid var(--edu-border);overflow:visible}
:root[data-direction=two] .shell-news .news-tile:last-child{border-bottom:0}
:root[data-direction=two] .shell-news .news-tile:hover{transform:none}
:root[data-direction=two] .shell-news .news-tile>img{grid-area:img;width:240px;height:auto;aspect-ratio:1600/427;object-fit:cover;border-radius:8px} /* OCIO banners are 1600x427: show the whole banner */
:root[data-direction=two] .shell-news .news-tile>div{grid-area:body;padding:0;display:flex;flex-direction:column;gap:4px}
:root[data-direction=two] .shell-news .news-tag{font-family:var(--edu-font-display);font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--edu-text-muted)}
:root[data-direction=two] .shell-news .news-tile h3{margin:0;font-size:17px;font-weight:600;line-height:1.6;background:none;padding:0}
:root[data-direction=two] .shell-news .news-tile h3 a{color:var(--edu-text);text-decoration:none}
:root[data-direction=two] .shell-news .news-tile h3 a::before{content:"";position:absolute;inset:0}
:root[data-direction=two] .shell-news .news-tile:hover h3 a{color:var(--edu-link);text-decoration:underline;text-underline-offset:3px}
:root[data-direction=two] .shell-news .news-tile p{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--edu-text-muted)}
@media (max-width:600px){
  :root[data-direction=two] :is(.shell-site,.t2-home) .shell-news{padding:4px 16px}
  :root[data-direction=two] .shell-news .news-tile{grid-template-columns:minmax(0,1fr) 32px;grid-template-areas:"img img" "body arrow";gap:12px 16px;padding:20px 0}
  :root[data-direction=two] .shell-news .news-tile>img{width:100%}
  :root[data-direction=two] .shell-news .news-tile::after{width:24px}
}

/* ---------------------------------------------------------------- tables (C11) */
:root[data-direction=two] .table-wrap{background:#fff;border-radius:var(--t2-r-s) var(--t2-r-s) 0 0}
:root[data-direction=two] .table-wrap>table,
:root[data-direction=two] .x-table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;border-radius:var(--t2-r-s) var(--t2-r-s) 0 0;overflow:hidden}
:root[data-direction=two] .table-wrap tr:first-child>th,
:root[data-direction=two] .table-wrap thead th,
:root[data-direction=two] .x-table thead th{background:var(--edu-action-primary);color:var(--edu-on-primary);font-weight:700;border:0;padding:14px 16px;text-align:left;vertical-align:top}
:root[data-direction=two] .table-wrap tr:first-child>th:first-child{border-top-left-radius:var(--t2-r-s)}
:root[data-direction=two] .table-wrap tr:first-child>th:last-child{border-top-right-radius:var(--t2-r-s)}
:root[data-direction=two] .table-wrap tr:not(:first-child)>:is(td,th),
:root[data-direction=two] .table-wrap tbody td{background:#fff;border:0;border-bottom:1px solid var(--edu-border);padding:14px 16px;vertical-align:top;color:var(--edu-text)}
:root[data-direction=two] .table-wrap tr:not(:first-child)>th{font-weight:700;background:#fff}

/* ---------------------------------------------------------------- notices (C08): pale orange tint + 4px orange bar */
:root[data-direction=two] .notice,
:root[data-direction=two] .edu-callout:not(.edu-callout--info),
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-notice{background:var(--edu-accent-tint);border:0!important;border-left:4px solid var(--edu-brand-accent)!important;border-radius:0 var(--edu-radius-md) var(--edu-radius-md) 0;color:var(--edu-text)}
:root[data-direction=two] .edu-callout:not(.edu-callout--info)::before{background:var(--edu-text)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-notice{max-width:1272px;margin:24px auto 0;padding:16px 24px}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-notice strong{color:var(--edu-text);font-weight:700}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-notice>div>.ocio-icon{color:var(--edu-text)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-notice>div>span:not(.ocio-icon){color:var(--edu-text)}
@media (max-width:1320px){:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-notice{margin:24px 24px 0}}
@media (max-width:600px){:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-notice{margin:16px 16px 0;padding:16px}}

/* ---------------------------------------------------------------- panels that were bordered cards in Theme 1 */
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-training,
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-article>.shell-login,
:root[data-direction=two] .faq details,
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-docs .file-row{border:0;border-radius:var(--edu-radius-md);background:#fff;box-shadow:none}
:root[data-direction=two] .faq{display:grid;gap:8px}
:root[data-direction=two] .faq details>summary{padding-left:20px;padding-right:20px}
:root[data-direction=two] .faq details>div{padding-left:20px;padding-right:20px}
:root[data-direction=two] :is(.shell-site,.t2-home) .section-tabs a{border-color:transparent;background:#fff;border-radius:var(--edu-radius-full)}
:root[data-direction=two] :is(.shell-site,.t2-home) .section-tabs a[aria-current]{background:var(--edu-action-primary);border-color:var(--edu-action-primary);color:#fff}
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-article>.shell-login{box-shadow:var(--edu-shadow-md)}
:root[data-direction=two] :is(.shell-site,.t2-home) input:not([type=checkbox]):not([type=radio]){border-radius:8px}

/* ---------------------------------------------------------------- big numbers in Jost */
:root[data-direction=two] .contact-band-lines strong,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-help-contacts strong,
:root[data-direction=two] .x-stats strong,
:root[data-direction=two] .x-stat-boxes strong{font-family:var(--edu-font-display);font-weight:500;letter-spacing:.01em}
:root[data-direction=two] .contact-band-label{font-family:var(--edu-font-display);letter-spacing:.12em}

/* ---------------------------------------------------------------- footer: green, white text, 4px orange top rule */
:root[data-direction=two] .site-footer,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer{background:var(--edu-action-primary);color:#fff;border-top:4px solid var(--edu-brand-accent)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer :is(h2,h3,p,span,a:not(.ocio-button)){color:#fff}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer :is(h3,p,.ocio-footer-bottom span){color:#ffffffd9}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer h3{font-family:var(--edu-font-display);letter-spacing:.12em}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer a:not(.ocio-button):hover{color:#fff;text-decoration:underline}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer .ocio-footer-bottom{border-top-color:#ffffff40}
/* EdUHK reversed (single-colour white) logo on the green footer; swap for the official reversed artwork when supplied */
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer-logo{filter:brightness(0) invert(1)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer .shell-login-btn{background:transparent;border-color:#ffffffb3;color:#fff;border-radius:var(--edu-radius-full)}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-footer .shell-login-btn:hover{background:#fff;color:var(--edu-action-primary)}

/* ---------------------------------------------------------------- phone fit (390) */
:root[data-direction=two] .image-carousel-count{white-space:nowrap}
@media (max-width:600px){:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-hero .ocio-actions{gap:12px}}
/* Compact login form: a smaller title so the 420px card stays compact */
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-login .shell-block-title{font-size:22px;line-height:1.45;border-left:0;padding-left:0} /* component title: no long-form bar */
/* Library component previews: show Theme 2 on its warm page colour so white, borderless cards read */
:root[data-direction=two]:has(.specimen-mode),
:root[data-direction=two] .specimen-mode{background:var(--edu-surface-muted)}

/* ---------------------------------------------------------------- display tracking (review fix 1)
   Theme 1's tight negative tracking (down to -.055em) made letters touch; all Theme 2 display headings (28px+) use 0. */
:root[data-direction=two] .ocio-hero-title,
:root[data-direction=two] .home-block .ocio-hero .homepage-title{letter-spacing:0}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-heading,
:root[data-direction=two] :is(.shell-site,.t2-home) h1.ocio-heading,
:root[data-direction=two] .contact-band h2,
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-help .ocio-heading,
:root[data-direction=two] .homepage-title,
:root[data-direction=two] .site-title,
:root[data-direction=two] :is(.shell-site,.t2-home) .shell-block-title{letter-spacing:0} /* 0: these are 28px+ and Theme 2 body tracking (+.02em) must not be undercut */

/* ---------------------------------------------------------------- hero copy legibility (review fix 3)
   A soft warm wash behind the copy only (the photo stays visible at the sides and below the buttons);
   the subtitle uses the body text colour. Measured on rendered pixels: >= 4.5:1 at 390 / 1024 / 1440. */
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-hero-copy{isolation:isolate}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-hero-copy::before{content:"";position:absolute;z-index:-1;inset:-24px -64px -40px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgb(245 244 240 / .94) 62%,rgb(245 244 240 / 0) 100%);pointer-events:none}
:root[data-direction=two] :is(.shell-site,.t2-home) .ocio-hero-copy>p:not(.ocio-label){color:var(--edu-text)}

/* ================================================================ Theme 2 homepage layout (1104-T2c)
   The Theme 2 layout of the Service Landing homepage (home-story orderTwo). Task first, at most 6 sections, one rhythm:
   every section has the same container, the same vertical spacing and the same bilingual heading (P3).
   Same header and menu as the inner pages (P7). Colour: green = action / current, orange = accent marks only (P5).
   Built from existing components: C08 notice, C05 tiles + filter, C24/B carousel, C15 rows, C06 links, C12 help band. */
:root[data-direction=two] .t2-home{--t2-edge:32px}
:root[data-direction=two] :is(.shell-site,.t2-home).t2-home .ocio-section{max-width:1320px;margin:0 auto;padding:56px var(--t2-edge)}

/* ---- bilingual heading (Theme 2): English word in light Jost + Chinese label on one baseline */
:root[data-direction=two] .t2-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0 0 24px;padding:0;border:0;background:none;font-weight:300}
:root[data-direction=two] .t2-head-en{font-family:var(--edu-font-display);font-size:30px;line-height:1.2;font-weight:300;letter-spacing:.01em;color:var(--edu-text)}
:root[data-direction=two] .t2-head-zh{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--edu-text-muted)}
/* The Help band's label uses the same heading size as every other homepage section (P3) */
:root[data-direction=two] .t2-home .ocio-help .ocio-label-en{font-size:30px;font-weight:300}

/* ---- 1 task hero: heading, service search, 6 top tasks (warm page background, no photo: text contrast is fixed) */
:root[data-direction=two] .t2-home .t2-task{padding-top:64px;padding-bottom:40px}
:root[data-direction=two] .t2-task-head{margin-bottom:8px}
:root[data-direction=two] .t2-task-head .t2-head-en{font-size:40px;font-weight:400;letter-spacing:0}
:root[data-direction=two] .t2-task-head .t2-head-zh{font-size:16px;letter-spacing:.04em}
:root[data-direction=two] .t2-task-lead{margin:0 0 24px;font-size:15px;line-height:1.7;color:var(--edu-text-muted)}
:root[data-direction=two] .t2-home .ocio-search.t2-task-search{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;max-width:720px;min-height:56px;margin:0;padding:0 24px;background:#fff;border:1px solid var(--edu-border-control);border-radius:var(--edu-radius-full);color:var(--edu-text-muted)}
:root[data-direction=two] .t2-task-search>.ocio-icon{width:20px;height:20px;flex:none}
:root[data-direction=two] .t2-home .t2-task-search input{flex:1;min-width:0;min-height:54px;margin:0;padding:0;border:0!important;border-radius:0;background:none;box-shadow:none;outline:none;font-size:17px;color:var(--edu-text)}
:root[data-direction=two] .t2-task-search:focus-within{border-color:var(--edu-action-primary);outline:2px solid var(--edu-focus-ring);outline-offset:2px}
:root[data-direction=two] .t2-task-status{min-height:1.6em;margin:8px 0 0;padding-left:24px;font-size:14px;color:var(--edu-text-muted)}
:root[data-direction=two] .t2-tasks{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
:root[data-direction=two] .t2-task-chip{box-sizing:border-box;display:flex;align-items:center;gap:12px;height:100%;min-height:64px;padding:12px 16px;background:#fff;border:1px solid transparent;border-radius:var(--edu-radius-md);color:var(--edu-text);font-size:15px;font-weight:600;line-height:1.35;text-decoration:none;transition:border-color .15s,color .15s}
:root[data-direction=two] .t2-task-chip>.ocio-icon{width:22px;height:22px;flex:none;color:var(--edu-action-primary)}
:root[data-direction=two] .t2-task-chip:hover{border-color:var(--edu-action-primary);color:var(--edu-action-primary)}
:root[data-direction=two] .t2-task-chip:focus-visible{outline:2px solid var(--edu-focus-ring);outline-offset:2px}
:root[data-direction=two] :is(.shell-site,.t2-home).t2-home .ocio-notice{box-sizing:border-box;max-width:calc(1320px - 2 * var(--t2-edge));margin:0 auto} /* same container edge as every section (P3) */
@media (max-width:1320px){:root[data-direction=two] :is(.shell-site,.t2-home).t2-home .ocio-notice{margin:0 var(--t2-edge)}}

/* ---- 3 Services: filter chips + 6 photo tiles, ONE caption colour (white bar, dark text, green arrow; green on hover/focus) */
:root[data-direction=two] .t2-services .ocio-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
:root[data-direction=two] .t2-services .ocio-filter button{min-height:44px;padding:0 18px;border:1px solid var(--edu-border-control);background:#fff;color:var(--edu-text);font-size:14px;cursor:pointer}
:root[data-direction=two] .t2-services .ocio-filter button[aria-pressed=true]{background:var(--edu-action-primary);border-color:var(--edu-action-primary);color:#fff}
:root[data-direction=two] .t2-services .ocio-filter button:focus-visible{outline:2px solid var(--edu-focus-ring);outline-offset:2px}
:root[data-direction=two] .t2-tile-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
:root[data-direction=two] .t2-tile-grid>li[hidden]{display:none}
:root[data-direction=two] .t2-tile{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--edu-radius-md);color:var(--edu-text);text-decoration:none}
:root[data-direction=two] .t2-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .4s ease}
:root[data-direction=two] .t2-tile:hover>img{transform:scale(1.04)}
:root[data-direction=two] .t2-tile-bar{position:absolute;right:0;bottom:0;box-sizing:border-box;width:66.667%;min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:12px 64px 12px 20px;background:#fff;color:var(--edu-text);border-top-left-radius:var(--edu-radius-md);transition:background .15s,color .15s}
:root[data-direction=two] .t2-tile-bar small{font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.4;color:var(--edu-text-muted)}
:root[data-direction=two] .t2-tile-bar strong{font-size:16px;font-weight:600;line-height:1.4}
:root[data-direction=two] .t2-tile-bar::after{content:"";position:absolute;right:20px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--edu-action-primary);-webkit-mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;transition:transform .2s ease}
:root[data-direction=two] .t2-tile:is(:hover,:focus-visible) .t2-tile-bar{background:var(--edu-action-primary);color:#fff}
:root[data-direction=two] .t2-tile:is(:hover,:focus-visible) .t2-tile-bar small{color:#ffffffe6}
:root[data-direction=two] .t2-tile:is(:hover,:focus-visible) .t2-tile-bar::after{background:#fff;transform:translateX(4px)}
:root[data-direction=two] .t2-tile:focus-visible{outline:3px solid var(--edu-focus-ring);outline-offset:3px}

/* ---- 4 What's new: ONE contained C24/B carousel (banner ratio, no autoplay) + the latest 4 news rows */
:root[data-direction=two] .t2-news-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
:root[data-direction=two] .t2-news-promo{padding:16px 16px 8px;background:#fff;border-radius:var(--edu-radius-md)}
:root[data-direction=two] .t2-news-promo .image-carousel-slide img{border-radius:8px}
:root[data-direction=two] .t2-info-rows{border-top:1px solid var(--edu-border)}
:root[data-direction=two] :is(.shell-site,.t2-home) .t2-info-rows .ocio-update-row{padding:18px 0}
:root[data-direction=two] :is(.shell-site,.t2-home) .t2-info-rows .ocio-update-row h3{margin:0;padding:0;background:none;font-size:15px;font-weight:500;line-height:1.7;letter-spacing:.02em}
:root[data-direction=two] :is(.shell-site,.t2-home) .t2-info-rows .ocio-update-row:hover h3{color:var(--edu-link);text-decoration:underline;text-underline-offset:3px}
/* "All OCIO News": the round 1 square long-arrow style (standalone More link) */
:root[data-direction=two] .t2-more{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;min-width:250px;min-height:56px;margin-top:24px;padding:0 72px 0 24px;border:1px solid var(--edu-text);border-radius:0;background:#fff;color:var(--edu-text);font-family:var(--edu-font-display);font-size:16px;font-weight:500;letter-spacing:.04em;text-decoration:none}
:root[data-direction=two] .t2-more::after{content:"";position:absolute;right:20px;top:50%;width:16px;height:16px;margin-top:-8px;background:currentColor;-webkit-mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;transition:transform .2s ease}
:root[data-direction=two] .t2-more:hover{background:var(--edu-text);color:#fff}
:root[data-direction=two] .t2-more:hover::after{transform:translateX(4px)}
:root[data-direction=two] .t2-more:focus-visible{outline:2px solid var(--edu-focus-ring);outline-offset:2px}

/* ---- 5 Start here: four equal links in one row (2 x 2 on phones) */
:root[data-direction=two] .t2-start-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
:root[data-direction=two] .t2-start-grid a{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;height:100%;min-height:112px;padding:20px 20px 44px;background:#fff;border:1px solid transparent;border-radius:var(--edu-radius-md);color:var(--edu-text);text-decoration:none;transition:border-color .15s,color .15s}
:root[data-direction=two] .t2-start-grid small{font-family:var(--edu-font-display);font-size:12px;letter-spacing:.06em;color:var(--edu-text-muted)}
:root[data-direction=two] .t2-start-grid span{font-size:16px;font-weight:600;line-height:1.45}
:root[data-direction=two] .t2-start-grid a::after{content:"";position:absolute;left:20px;bottom:18px;width:16px;height:16px;background:var(--edu-action-primary);-webkit-mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;mask:url("assets/icons/arrow-right.svg") center/contain no-repeat;transition:transform .2s ease}
:root[data-direction=two] .t2-start-grid a:hover{border-color:var(--edu-action-primary);color:var(--edu-action-primary)}
:root[data-direction=two] .t2-start-grid a:hover::after{transform:translateX(4px)}
:root[data-direction=two] .t2-start-grid a:focus-visible{outline:2px solid var(--edu-focus-ring);outline-offset:2px}
:root[data-direction=two] .t2-start-grid a>.link-icon{display:none}
@media (prefers-reduced-motion:reduce){:root[data-direction=two] :is(.t2-tile>img,.t2-tile-bar,.t2-tile-bar::after,.t2-more::after,.t2-start-grid a::after){transition:none}}

/* ---- tablet / phone */
@media (max-width:1023px){
  :root[data-direction=two] .t2-tasks{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root[data-direction=two] .t2-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root[data-direction=two] .t2-news-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:600px){
  :root[data-direction=two] .t2-home{--t2-edge:20px}
  :root[data-direction=two] :is(.shell-site,.t2-home).t2-home .ocio-section{padding-top:40px;padding-bottom:40px}
  :root[data-direction=two] .t2-task-head .t2-head-en{font-size:30px}
  :root[data-direction=two] .t2-head-en{font-size:26px}
  :root[data-direction=two] .t2-tasks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  :root[data-direction=two] .t2-task-chip{min-height:56px;padding:10px 12px;font-size:14px}
  :root[data-direction=two] .t2-tile-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  :root[data-direction=two] .t2-tile-bar{width:80%}
  :root[data-direction=two] .t2-start-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  :root[data-direction=two] .t2-news-promo{padding:8px 8px 4px}
}

/* ---- 44px targets on the shared shell chrome (1104-T2c P8): logo link, phone Menu button, footer links */
:root[data-direction=two] .shell-site .ocio-brand{min-height:44px}
:root[data-direction=two] .shell-site .shell-nav-wrap>summary{min-height:44px;box-sizing:border-box}
:root[data-direction=two] .shell-site .ocio-footer a.ocio-link{min-height:44px;box-sizing:border-box;align-items:center}
:root[data-direction=two] .shell-site .ocio-footer-bottom a{display:inline-flex;align-items:center;min-height:44px}