.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}/* ============================================================
   GAITS Platform Overview — CSS
   Paste into the Custom CSS panel in Liferay's Advanced tab.

   CHANGES FROM PRIOR VERSION
   1. Every selector scoped under .gp-page. The bare `section`
      rule was the cause of the two vertical gaps: it applied
      3rem of top and bottom padding to every <section> on the
      page, including the ones in the Liferay theme header and
      content column. The bare *, nav, h3, p and footer rules
      had the same reach.
   2. Custom properties moved off :root and prefixed --gp-.
      Generic names on :root (--navy, --blue, --teal, --gold)
      are declared with different values by hic.css and
      funding-readiness.css.
   3. html { scroll-behavior: smooth } removed. It was global
      and the page has no in-page anchors.
   4. The .portlet-* padding-top override block is retained but
      is probably now unnecessary. See the note at the foot.
   ============================================================ */

/* ── Scope root and tokens ── */
.gp-page {
  --gp-navy:        #1a2744;
  --gp-blue:        #2d5fa3;
  --gp-teal:        #1e7a8c;
  --gp-warm:        #c8703a;
  --gp-gold:        #d4a84b;
  --gp-green:       #2e7d52;
  --gp-light-blue:  #e8f0f8;
  --gp-light-teal:  #e6f4f6;
  --gp-light-warm:  #faf0e8;
  --gp-light-green: #e8f5ee;
  --gp-gray-100:    #f7f8fa;
  --gp-gray-200:    #edeef2;
  --gp-gray-400:    #9aa0b0;
  --gp-gray-600:    #5a6070;
  --gp-gray-800:    #2e3340;
  --gp-white:       #ffffff;
  --gp-text:        #2e3340;
  --gp-text-light:  #5a6070;

  color: var(--gp-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

.gp-page *,
.gp-page *::before,
.gp-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

/* ── Strip Liferay portlet wrapper spacing above page content ── */
/* Deliberately NOT scoped: these are theme elements outside .gp-page. */
.portlet-layout,
.portlet-column-content,
.portlet-column-content-first,
.portlet-content,
.portlet-content-container,
.journal-content-article { padding-top: 0 !important; margin-top: 0 !important; }

/* ── Navigation ── */
.gp-page nav {
  position: sticky; top: 0; background: var(--gp-navy); z-index: 100;
  padding: 0 2rem; display: flex; align-items: center;
  justify-content: space-between; overflow-x: auto;
}
.gp-page nav a {
  color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 1rem 1.1rem; white-space: nowrap; transition: opacity .2s ease;
}
.gp-page nav a:hover { opacity: .7; }
.gp-page .nav-brand { color: #fff; font-size: 15px; font-weight: 700; padding-right: 2rem; margin-right: .5rem; }
.gp-page .nav-links { display: flex; align-items: center; flex: 1; }
.gp-page .nav-signin {
  margin-left: auto;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
  color: #fff; padding: .45rem 1.2rem; border-radius: 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; transition: background .2s ease; white-space: nowrap;
}
.gp-page .nav-signin:hover { background: rgba(255,255,255,.28); opacity: 1; }

/* ── Hero ── */
.gp-page .hero {
  background: linear-gradient(135deg, #1a2744, #2d3d6b, #1a4a5a);
  color: #fff; padding: 1.8rem 2rem;
}
.gp-page .hero-inner {
  display: flex; align-items: center; gap: 2rem;
  max-width: 1060px; margin: 0 auto;
}

/* Left: badge pills — vertical stack */
.gp-page .hero-badges {
  display: flex; flex-direction: column; gap: .45rem;
  flex-shrink: 0; width: 175px;
}
.gp-page .hero-badge {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.88); padding: .35rem .85rem; border-radius: 2rem;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  white-space: nowrap;
}

/* Centre: title block */
.gp-page .hero-center { flex: 1; text-align: center; }
.gp-page .hero-label {
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gp-gold); margin-bottom: .6rem;
}
.gp-page .hero h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700; line-height: 1.2;
  margin-bottom: .7rem; color: #fff;
}
.gp-page .hero-sub {
  font-size: .95rem; color: rgba(255,255,255,.75); max-width: 560px;
  margin: 0 auto .9rem; font-weight: 300; line-height: 1.65;
}
.gp-page .hero-attribution { font-size: .82rem; color: rgba(255,255,255,.55); }
.gp-page .hero-attribution a { color: rgba(255,255,255,.55); text-decoration: underline; }
.gp-page .hero-attribution a:hover { color: rgba(255,255,255,.9); opacity: 1; }

/* Right: HIC diagram */
.gp-page .hero-image-wrap { flex-shrink: 0; width: 175px; }
.gp-page .hero-image { width: 100%; height: auto; display: block; }

/* ── Mobile: show centre text only, hide pills and image ── */
@media (max-width: 680px) {
  .gp-page .hero-badges     { display: none; }
  .gp-page .hero-image-wrap { display: none; }
  .gp-page .hero-center     { text-align: center; }
}

/* ── Layout ── */
.gp-page .gp-container { max-width: 860px; margin: 0 auto; padding: 0 2rem; }
.gp-page .gp-container-wide { max-width: 1080px; margin: 0 auto; padding: 0 2rem; }

.gp-page section { padding: 3rem 2rem; }
.gp-page section + section { border-top: 1px solid var(--gp-gray-200); }

/* ── Section labels & headings ── */
.gp-page .section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gp-teal); margin-bottom: .6rem;
}
.gp-page h2.section-heading {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--gp-navy);
  line-height: 1.25; margin-bottom: 1.2rem;
}
.gp-page h3 { font-size: 1.25rem; font-weight: 600; color: var(--gp-navy); margin-bottom: .75rem; margin-top: 2rem; }
.gp-page h3:first-child { margin-top: 0; }
.gp-page p { line-height: 1.75; margin-bottom: 1rem; color: var(--gp-gray-800); }
.gp-page p:last-child { margin-bottom: 0; }

/* ── Journey section — 4 framework cards ── */
.gp-page .journey-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0; margin-top: 2rem; border: 1px solid var(--gp-gray-200); border-radius: 10px;
  overflow: hidden;
}
.gp-page .journey-card {
  padding: 1.6rem 1.4rem; border-right: 1px solid var(--gp-gray-200);
  position: relative; background: var(--gp-white);
}
.gp-page .journey-card:last-child { border-right: none; }
.gp-page .journey-card-num {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .5rem;
}
.gp-page .journey-card-title {
  font-size: 1rem; font-weight: 700; color: var(--gp-navy); margin-bottom: .6rem; line-height: 1.3;
}
.gp-page .journey-card-desc { font-size: .875rem; color: var(--gp-text-light); line-height: 1.6; margin: 0; }
.gp-page .journey-card-link {
  display: inline-block; margin-top: 1rem; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-decoration: none; text-transform: uppercase;
}
.gp-page .journey-card-link:hover { opacity: .7; }

/* Colour-coded top borders per framework */
.gp-page .journey-hic     { border-top: 3px solid var(--gp-teal); }
.gp-page .journey-hic     .journey-card-num  { color: var(--gp-teal); }
.gp-page .journey-hic     .journey-card-link { color: var(--gp-teal); }
.gp-page .journey-veritas { border-top: 3px solid var(--gp-warm); }
.gp-page .journey-veritas .journey-card-num  { color: var(--gp-warm); }
.gp-page .journey-veritas .journey-card-link { color: var(--gp-warm); }
.gp-page .journey-hbmc    { border-top: 3px solid var(--gp-blue); }
.gp-page .journey-hbmc    .journey-card-num  { color: var(--gp-blue); }
.gp-page .journey-hbmc    .journey-card-link { color: var(--gp-blue); }
.gp-page .journey-fr      { border-top: 3px solid var(--gp-gold); }
.gp-page .journey-fr      .journey-card-num  { color: var(--gp-warm); }
.gp-page .journey-fr      .journey-card-link { color: var(--gp-warm); }

/* ── Platform capabilities ── */
.gp-page .capabilities-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem; margin-top: 1.5rem;
}
.gp-page .capability-card {
  background: var(--gp-gray-100); border: 1px solid var(--gp-gray-200);
  border-radius: 8px; padding: 1.4rem;
}
.gp-page .capability-card-label {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gp-blue); margin-bottom: .5rem;
}
.gp-page .capability-card-title { font-size: 1rem; font-weight: 700; color: var(--gp-navy); margin-bottom: .5rem; }
.gp-page .capability-card-desc { font-size: .875rem; color: var(--gp-text-light); line-height: 1.6; margin: 0; }

/* ── Solution types ── */
.gp-page .solution-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.gp-page .solution-card {
  background: var(--gp-white); border: 1px solid var(--gp-gray-200);
  border-radius: 8px; padding: 1.2rem 1rem; text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gp-page .solution-card:hover { border-color: var(--gp-teal); box-shadow: 0 2px 8px rgba(30,122,140,.12); }
.gp-page .solution-card-title { font-size: .9rem; font-weight: 700; color: var(--gp-navy); margin-bottom: .4rem; }
.gp-page .solution-card-links { font-size: 12px; }
.gp-page .solution-card-links a { color: var(--gp-blue); text-decoration: none; font-weight: 600; }
.gp-page .solution-card-links a:hover { opacity: .7; }
.gp-page .solution-card-links .sep { color: var(--gp-gray-400); margin: 0 .3rem; }

/* ── Roles section ── */
.gp-page .roles-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem; margin-top: 1.5rem;
}
.gp-page .role-card {
  border: 1px solid var(--gp-gray-200); border-radius: 10px; padding: 1.6rem;
  background: var(--gp-white);
}
.gp-page .role-card-icon {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1.1rem;
  margin-bottom: 1rem;
}
.gp-page .role-user   .role-card-icon { background: var(--gp-light-blue); }
.gp-page .role-mentor .role-card-icon { background: var(--gp-light-teal); }
.gp-page .role-pm     .role-card-icon { background: var(--gp-light-warm); }
.gp-page .role-card-title { font-size: 1.05rem; font-weight: 700; color: var(--gp-navy); margin-bottom: .5rem; }
.gp-page .role-card-desc { font-size: .875rem; color: var(--gp-text-light); line-height: 1.6; margin: 0 0 1rem; }
.gp-page .role-card ul { margin: 0; padding-left: 1.2rem; }
.gp-page .role-card ul li { font-size: .85rem; color: var(--gp-text-light); line-height: 1.6; margin-bottom: .2rem; }
.gp-page .role-card-link {
  display: inline-block; margin-top: 1rem; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--gp-blue);
}
.gp-page .role-card-link:hover { opacity: .7; }

/* ── Sign-in CTA block ── */
.gp-page .signin-block {
  background: var(--gp-navy); border-radius: 12px; padding: 2.5rem 2.2rem;
  text-align: center; margin: 2rem 0;
}
.gp-page .signin-block h3 { color: #fff; font-size: 1.4rem; margin-bottom: .75rem; margin-top: 0; }
.gp-page .signin-block p { color: rgba(255,255,255,.7); font-size: 1rem; margin-bottom: 1.5rem; }
.gp-page .signin-btn {
  display: inline-block; background: var(--gp-gold); color: var(--gp-navy);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  padding: .8rem 2rem; border-radius: 6px; text-decoration: none;
  transition: opacity .2s ease;
}
.gp-page .signin-btn:hover { opacity: .85; }
.gp-page .signin-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Auth hub cards ── */
.gp-page .hub-intro {
  background: var(--gp-gray-100); border-bottom: 1px solid var(--gp-gray-200);
  padding: 2rem; text-align: center;
}
.gp-page .hub-intro p { max-width: 640px; margin: 0 auto; font-size: 1.05rem; color: var(--gp-gray-600); }
.gp-page .hub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem; padding: 2.5rem 2rem;
}
.gp-page .hub-card {
  border: 1px solid var(--gp-gray-200); border-radius: 10px; padding: 1.6rem;
  background: var(--gp-white); text-decoration: none; color: var(--gp-text);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  display: flex; flex-direction: column;
}
.gp-page .hub-card:hover {
  border-color: var(--gp-blue); box-shadow: 0 4px 16px rgba(45,95,163,.12);
  transform: translateY(-2px); opacity: 1;
}
.gp-page .hub-card-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .6rem;
}
.gp-page .hub-card-title { font-size: 1.05rem; font-weight: 700; color: var(--gp-navy); margin-bottom: .5rem; }
.gp-page .hub-card-desc { font-size: .85rem; color: var(--gp-text-light); line-height: 1.6; margin: 0; flex: 1; }
.gp-page .hub-card-arrow { font-size: 1.2rem; color: var(--gp-gray-400); margin-top: 1rem; text-align: right; }

.gp-page .hub-hic     .hub-card-tag { color: var(--gp-teal); }
.gp-page .hub-hic:hover { border-color: var(--gp-teal); box-shadow: 0 4px 16px rgba(30,122,140,.12); }
.gp-page .hub-veritas .hub-card-tag { color: var(--gp-warm); }
.gp-page .hub-veritas:hover { border-color: var(--gp-warm); box-shadow: 0 4px 16px rgba(200,112,58,.12); }
.gp-page .hub-hbmc    .hub-card-tag { color: var(--gp-blue); }
.gp-page .hub-fr      .hub-card-tag { color: var(--gp-warm); }
.gp-page .hub-guide   .hub-card-tag { color: var(--gp-navy); }
.gp-page .hub-tracker .hub-card-tag { color: var(--gp-green); }
.gp-page .hub-tracker:hover { border-color: var(--gp-green); box-shadow: 0 4px 16px rgba(46,125,82,.12); }

/* ── Guest sign-in prompt ── */
.gp-page .guest-signin-prompt {
  background: var(--gp-light-teal); border-bottom: 1px solid #c0dfe4; padding: .7rem 2rem; text-align: center;
}
.gp-page .guest-signin-prompt p { font-size: .925rem; color: #1a5a6a; margin: 0; }
.gp-page .guest-signin-prompt a { color: var(--gp-teal); font-weight: 700; text-decoration: none; }
.gp-page .guest-signin-prompt a:hover { opacity: .7; }

/* ── Programmes hub card ── */
.gp-page .hub-prog .hub-card-tag { color: var(--gp-gold); }
.gp-page .hub-prog:hover { border-color: var(--gp-gold); box-shadow: 0 4px 16px rgba(212,168,75,.15); }

/* ── Gray banner sections ── */
.gp-page .section-gray { background: var(--gp-gray-100); }
.gp-page .section-teal-strip {
  background: linear-gradient(135deg, #1a4a5a, #1e7a8c);
  padding: 2.5rem 2rem; text-align: center;
}
.gp-page .section-teal-strip .section-label { color: rgba(255,255,255,.6); }
.gp-page .section-teal-strip h2 { color: #fff; }
.gp-page .section-teal-strip p { color: rgba(255,255,255,.8); max-width: 680px; margin: 0 auto 1.5rem; }

/* ── Footer ── */
.gp-page footer {
  background: var(--gp-navy);
  padding: 1.2rem 2rem;
  text-align: center;
}
.gp-page footer p { color: rgba(255,255,255,.45); font-size: .8rem; margin: 0; line-height: 1.7; }
.gp-page footer a { color: rgba(255,255,255,.55); text-decoration: none; font-weight: 600; letter-spacing: .03em; }
.gp-page footer a:hover { color: rgba(255,255,255,.85); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .gp-page .journey-grid { grid-template-columns: 1fr; }
  .gp-page .journey-card { border-right: none; border-bottom: 1px solid var(--gp-gray-200); }
  .gp-page .journey-card:last-child { border-bottom: none; }
  .gp-page section { padding: 2rem 1rem; }
  .gp-page .hub-grid { padding: 1.5rem 1rem; }
  .gp-page .signin-block { padding: 1.8rem 1.2rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .gp-page .hub-card,
  .gp-page .solution-card,
  .gp-page .signin-btn,
  .gp-page .nav-signin,
  .gp-page nav a { transition: none; }
  .gp-page .hub-card:hover { transform: none; }
}

/* ------------------------------------------------------------
   NOTE ON THE .portlet-* OVERRIDE BLOCK

   That block forces padding-top and margin-top to 0 on six
   Liferay wrapper classes. It was added to fight vertical space
   above the page content. With the bare `section` rule now
   scoped, that space should be gone at its source, and the
   override is probably redundant.

   Test by commenting the block out. If nothing moves, delete
   it. It is the only unscoped rule left in this file, and
   dropping it removes the last way this page's CSS can affect
   the theme.
   ------------------------------------------------------------ */