/* Office of Student Affairs and Services (page-osas.php), old theme.
   Ported from the debesmscat-2027 theme. Its tokens are redefined here, scoped to the
   page, using this theme's palette (as in css/orgchart.css); the dean card comes from
   css/orgchart.css. The layout rules after the tokens match the 2027 theme's
   assets/css/osas.css: keep them the same. */
.osas, .osas-lede {
  --eden: #194a40;
  --eden-deep: #12362f;
  --flame-y: #f1b24a;
  --flame-o: #e89a2c;
  --flame: linear-gradient(135deg, #ffc86e, #f1b24a);
  --surface: #fff;
  --band: #f4f9f1;
  --ink: #191919;
  --muted: #4f5f58;
  --line: #d5e6cd;
  --heading: #194a40;
  --on-chrome: #fff;
  --on-flame: #191919;
  --chip: #eef6ea;
  --shadow: 0 1px 2px rgb(25 74 64 / .06), 0 8px 24px rgb(25 74 64 / .08);
  --focus: #f1b24a;
  --f-display: Georgia, "Times New Roman", Times, serif;
  --f-body: Verdana, Geneva, Tahoma, sans-serif;
  --radius: 14px;
}
.osas { font: 400 15px/1.6 var(--f-body); color: var(--ink); }
.osas *, .osas *::before, .osas *::after { box-sizing: border-box; }
.osas a { color: var(--eden); }
.osas :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.osas .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.osas-lede { font: 400 17px/1.5 var(--f-body); color: var(--muted); max-width: 62ch; margin: 1.5rem 0 0; }

.osas { padding-block: 2.5rem 3rem; display: grid; gap: 3rem; }
.osas h2 { font: 400 1.5rem/1.2 var(--f-display); color: var(--heading); margin: 0 0 1rem; }
.osas h3 { margin: 0; }
.osas p { margin: 0 0 .75rem; }
.osas ul { list-style: none; margin: 0; padding: 0; }

/* About + dean */
.osas-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.osas-eyebrow { font: 600 .75rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--flame-o); margin-bottom: .5rem !important; }
.osas-about p { max-width: 65ch; }
.osas .osas-label { font: 600 .75rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--eden); margin-bottom: .75rem; }
.osas-dean .oc-card { max-width: 420px; }
.osas-dean .oc-card h3, .osas-dean .oc-card p, .osas-dean .oc-contact { margin: 0; }
.osas-dean .oc-contact { margin-top: .35rem; }

.osas-side { display: grid; gap: 1.5rem; }
.osas-figure { margin: 0; }
.osas .osas-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.osas-figure figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); }

/* Video */
.osas-video { max-width: 880px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); margin-bottom: .75rem; }
.osas-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Photo gallery */
.osas-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem !important; }
.osas-gallery a { display: grid; gap: .5rem; color: var(--ink); text-decoration: none; }
.osas-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.osas-gallery span { font-size: .88rem; font-weight: 600; line-height: 1.35; color: var(--heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.osas-gallery a:hover img { border-color: var(--eden); }
.osas-gallery a:hover span { text-decoration: underline; }

/* Offices under OSAS */
.osas-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.osas-units li { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--eden); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.osas-units h3 { font: 400 1.05rem/1.3 var(--f-display); color: var(--heading); margin-bottom: .4rem; }
.osas-units p { font-size: .92rem; color: var(--muted); margin: 0; }
.osas-units .osas-head { margin-top: .5rem; font-weight: 600; color: var(--eden); }

/* Programs */
.osas-programs { display: grid; gap: .9rem; max-width: 75ch; }
.osas-programs li { padding-left: 1.1rem; border-left: 3px solid var(--flame-y); }
.osas-programs b { display: block; color: var(--heading); }

/* News */
.osas-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem !important; }
.osas-news a { display: grid; gap: .3rem; height: 100%; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.osas-news a:hover { border-color: var(--eden); }
.osas-news small { color: var(--muted); font-size: .8rem; }
.osas-news b { font-weight: 600; line-height: 1.35; color: var(--heading); }
.osas-more { font-weight: 600; color: var(--eden); }

/* Contact */
.osas-contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem 2rem; padding: 1.5rem 1.75rem; background: var(--eden); color: var(--on-chrome); border-radius: var(--radius); }
.osas-contact h2 { color: var(--on-chrome); margin-bottom: .5rem; }
.osas-contact p { margin: 0 0 .25rem; }
.osas-contact a { color: var(--on-chrome); }
.osas .osas-fb { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.2rem; border-radius: 999px; background: var(--flame); color: var(--on-flame); font-weight: 600; text-decoration: none; }
.osas .osas-fb:hover { filter: brightness(1.05); text-decoration: underline; }

@media (max-width: 760px) {
  .osas { gap: 2.25rem; }
  .osas-top { grid-template-columns: minmax(0, 1fr); }
  .osas-contact { padding: 1.25rem; }
  .osas-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}