/* Pages built in the page editor (app/Support/SnuSite/PageLayout.php): sections → containers → widgets.
   Per-device values arrive as CSS variables (-d desktop, -t tablet ≤1024px, -m phone ≤640px); tablet falls back to
   desktop and phone to tablet. Colours from extra/brand.css. */
.pl-root { display: block; }
.pl-sec { position: relative; background: var(--pl-bg, transparent); min-height: var(--pl-minh, 0); display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--pl-pt-d, 56px); padding-bottom: var(--pl-pb-d, 56px); }
.pl-sec.pl-w-full { padding-left: 0; padding-right: 0; }
.pl-sec > .pl-inner { position: relative; z-index: 1; width: 100%; }
.pl-w-narrow > .pl-inner { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.pl-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pl-ov { position: absolute; inset: 0; background: #0b1b2e; }
.pl-text-light { color: #fff; }
.pl-text-light :is(h1, h2, h3, h4, p, li, a:not(.pl-btn)) { color: #fff; }

.pl-row { display: flex; flex-wrap: wrap; gap: var(--pl-gap, 24px); align-items: flex-start; }
.pl-gap-none > .pl-inner > .pl-row { --pl-gap: 0px; } .pl-gap-sm > .pl-inner > .pl-row { --pl-gap: 12px; } .pl-gap-lg > .pl-inner > .pl-row { --pl-gap: 40px; } .pl-gap-xl > .pl-inner > .pl-row { --pl-gap: 56px; }
.pl-va-center > .pl-inner > .pl-row { align-items: center; } .pl-va-end > .pl-inner > .pl-row { align-items: flex-end; } .pl-va-stretch > .pl-inner > .pl-row { align-items: stretch; }

/* containers: a width share of the row (0/none = share equally) */
.pl-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pl-cg, 16px);
  padding: var(--pl-cp-d, 0px); background: var(--pl-cbg, transparent); border-radius: var(--pl-crad, 0); }
.pl-col[style*="--pl-w-d"] { flex: 0 0 calc(var(--pl-w-d) * 1% - var(--pl-gap, 24px) * (100 - var(--pl-w-d)) / 100); }
.pl-dir-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.pl-j-center { justify-content: center; } .pl-j-end { justify-content: flex-end; } .pl-j-between { justify-content: space-between; }
.pl-a-start { align-items: flex-start; } .pl-a-center { align-items: center; } .pl-a-end { align-items: flex-end; }
.pl-cg-none { --pl-cg: 0px; } .pl-cg-sm { --pl-cg: 8px; } .pl-cg-lg { --pl-cg: 28px; }
.pl-filled { padding: var(--pl-cp-d, 24px); }
.pl-col.pl-flow { display: block; }                    /* the website's own flow (pages split from imported HTML) */
.pl-col.pl-flow.sidebar { display: grid; gap: 1.2rem; align-content: start; }   /* the website's .sidebar: its cards 1.2rem apart */
.pl-flow > .pl-wd { display: contents; }                /* widgets take no box of their own: margins meet as on the original */
/* the website's "first heading of the content has no space above" (.page-content > .block-title:first-child), through the widget */
.pl-flow > .pl-wd:first-child > .block-title, .pl-flow > .pl-wd:first-child > .prose:first-child > h2:first-child { margin-top: 0; }
.pl-shadow { box-shadow: 0 10px 30px rgba(11, 27, 46, .12); }
.pl-border { border: 1px solid rgba(11, 27, 46, .12); }

/* widgets */
.pl-wd { text-align: var(--al-d, inherit); margin-top: var(--pl-mt, 0); margin-bottom: var(--pl-mb, 0); min-width: 0; }
.pl-dir-row > .pl-wd { flex: 0 1 auto; }
/* site blocks dropped into a column drop their own page margins and container */
.pl-sec:not(.pl-w-full) .pl-wd > section, .pl-col .pl-wd > section.section-tight { padding: 0 !important; margin: 0; background: none; }
.pl-sec:not(.pl-w-full) .pl-wd > section > .container, .pl-sec:not(.pl-w-full) .pl-wd > section .container { max-width: none; padding-left: 0; padding-right: 0; width: auto; }
/* article text keeps the website's reading width (.prose max-width) */

.pl-heading { margin: 0; color: var(--navy, #0a3b5e); line-height: 1.15; }
.pl-heading a { color: inherit; text-decoration: none; }
.pl-heading-xl { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; }
.pl-heading-lg { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; }
.pl-heading-md { font-size: 1.4rem; font-weight: 700; }
.pl-heading-sm { font-size: 1.1rem; font-weight: 700; }
.pl-heading-sub { margin: .5rem 0 0; color: #4b5b6b; font-size: 1.05rem; }
.pl-image { margin: 0; }
.pl-image img, .pl-image picture { display: block; width: 100%; height: auto; }
.pl-ratio-16x9 img { aspect-ratio: 16 / 9; object-fit: cover; } .pl-ratio-4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.pl-ratio-1x1 img { aspect-ratio: 1; object-fit: cover; } .pl-ratio-3x4 img { aspect-ratio: 3 / 4; object-fit: cover; }
.pl-rounded img { border-radius: 14px; }
.pl-image figcaption { margin-top: .5rem; font-size: .9rem; color: #4b5b6b; }
.pl-img-empty { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #eef2f6; color: #8a99a8; border-radius: 10px; font-size: 2rem; }
.pl-button { margin: 0; }
.pl-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: background-color .15s ease, color .15s ease; }
.pl-btn-lg { padding: 1rem 1.9rem; font-size: 1.1rem; }
.pl-btn-primary { background: var(--navy, #0a3b5e); color: #fff; } .pl-btn-primary:hover { background: var(--navy-900, #062840); color: #fff; }
.pl-btn-gold { background: var(--gold, #c29a3b); color: #1a1405; } .pl-btn-gold:hover { background: var(--gold-700, #9c7a26); color: #fff; }
.pl-btn-outline { border-color: currentColor; color: var(--navy, #0a3b5e); background: transparent; } .pl-btn-outline:hover { background: var(--navy, #0a3b5e); color: #fff; }
.pl-text-light .pl-btn-outline { color: #fff; }
.pl-btn-link { padding: 0; color: var(--blue-700, #075478); text-decoration: underline; }
.pl-divider { border: 0; border-top: 2px solid rgba(11, 27, 46, .12); margin: .25rem auto; width: 100%; }
.pl-divider-dashed { border-top-style: dashed; } .pl-divider-gold { border-top: 3px solid var(--gold, #c29a3b); }
.pl-iconbox { display: flex; flex-direction: column; gap: .75rem; }
.pl-iconbox-side { flex-direction: row; align-items: flex-start; }
.pl-iconbox-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--blue-50, #e8f5fc); color: var(--navy, #0a3b5e); font-size: 1.5rem; }
.pl-iconbox-t { margin: 0 0 .25rem; font-size: 1.15rem; color: var(--navy, #0a3b5e); }
.pl-iconbox-t a { color: inherit; text-decoration: none; }
.pl-iconbox p { margin: 0; color: #4b5b6b; }
.pl-text-light .pl-iconbox p, .pl-text-light .pl-heading-sub { color: rgba(255, 255, 255, .85); }
[style*="--al-d:center"] .pl-iconbox { align-items: center; } [style*="--al-d:right"] .pl-iconbox { align-items: flex-end; }

/* devices */
.pl-hide-d { display: none !important; }
@media (max-width: 1024px) {
  .pl-hide-d:not(.pl-hide-t) { display: revert !important; }
  .pl-hide-t { display: none !important; }
  .pl-sec { padding-top: var(--pl-pt-t, var(--pl-pt-d, 44px)); padding-bottom: var(--pl-pb-t, var(--pl-pb-d, 44px)); }
  .pl-col { padding: var(--pl-cp-t, var(--pl-cp-d, 0px)); }
  .pl-col[style*="--pl-w-t"] { flex: 0 0 calc(var(--pl-w-t) * 1% - var(--pl-gap, 24px) * (100 - var(--pl-w-t)) / 100); }
  .pl-wd { text-align: var(--al-t, var(--al-d, inherit)); }
}
@media (max-width: 640px) {
  .pl-hide-t:not(.pl-hide-m) { display: revert !important; }
  .pl-hide-m { display: none !important; }
  .pl-sec { padding-top: var(--pl-pt-m, var(--pl-pt-t, var(--pl-pt-d, 32px))); padding-bottom: var(--pl-pb-m, var(--pl-pb-t, var(--pl-pb-d, 32px))); }
  .pl-col { flex: 0 0 100%; padding: var(--pl-cp-m, var(--pl-cp-t, var(--pl-cp-d, 0px))); }
  .pl-col[style*="--pl-w-m"] { flex: 0 0 calc(var(--pl-w-m) * 1% - var(--pl-gap, 24px) * (100 - var(--pl-w-m)) / 100); }
  .pl-wd { text-align: var(--al-m, var(--al-t, var(--al-d, inherit))); }
  .pl-iconbox-side { flex-direction: column; }
}

/* editing only (the editor's live preview): empty places and the start message */
[data-pl-edit] .pl-empty { display: grid; place-items: center; min-height: 96px; border: 2px dashed #b9c4cf; border-radius: 10px; color: #6b7a89; font: 600 14px/1.4 system-ui, sans-serif; background: rgba(238, 242, 246, .6); }
[data-pl-edit] .pl-start { margin: 40px auto; max-width: 720px; padding: 48px 24px; border: 2px dashed #b9c4cf; border-radius: 16px; text-align: center; color: #4b5b6b; font: 15px/1.5 system-ui, sans-serif; }
[data-pl-edit] .pl-missing, [data-pl-edit] .pl-error { padding: 16px; background: #fff4e5; color: #6b4b00; border-radius: 8px; font: 14px/1.4 system-ui, sans-serif; }
[data-pl-edit] a { cursor: default; }