/* ==========================================================================
   VVU — Administration office pages (shared card designs)
   Used by office_of_the_vice_chancellor.php, office_of_the_pro-vice_chancellor.php,
   office_of_the_registrar.php, office_of_the_cfo.php, office_of_rdir.php,
   office_of_dsls.php and office_of_sls.php.
     .of-mandate / .of-md   numbered row cards  (Mandate / Focus Areas / Ministries)
     .of-related / .of-rel  ribbon-tab link cards (Related Offices)
   ========================================================================== */

/* ---- Mandate of the Office: numbered row cards ---- */
.of-mandate {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 26px; max-width: 1200px; margin: 0 auto;
}
.of-md {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px;
    min-height: 150px; padding: 22px 118px 22px 22px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 16px 34px -26px rgba(15, 23, 42, .45);
    transition: transform .35s ease, box-shadow .35s ease;
}
.of-md:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgba(15, 23, 42, .5); }

.of-md-icon {
    flex: 0 0 92px; height: 92px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #ffffff, #eef2f8);
    border: 1px solid #eef1f6;
    box-shadow: 6px 6px 14px rgba(15, 23, 42, .08), -5px -5px 12px rgba(255, 255, 255, .9);
    transition: background .35s ease;
}
.of-md-icon .material-symbols-outlined {
    font-size: 40px; line-height: 1; color: #1e3a8a;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
    transition: color .35s ease, transform .35s ease;
}
.of-md:nth-child(even) .of-md-icon .material-symbols-outlined { color: #b45309; }
.of-md:hover .of-md-icon { background: linear-gradient(145deg, #1e3a8a, #172554); }
.of-md:hover .of-md-icon .material-symbols-outlined { color: #fbbf24; transform: scale(1.06); }

.of-md-body { min-width: 0; }
.of-md-title {
    margin-bottom: 6px; color: #172554; font-family: 'Open Sans', sans-serif;
    font-size: 18px; font-weight: 600; line-height: 1.3;
}
.of-md-text { margin: 0; color: #6b7280; font-size: 14.5px; font-weight: 400; line-height: 1.6; }

/* Slanted number badge, bottom-right */
.of-md-num {
    position: absolute; right: 0; bottom: 0; width: 124px; height: 58px;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 18px;
    background: linear-gradient(135deg, #1e3a8a, #172554); color: #fff;
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
    font-family: 'Open Sans', sans-serif; font-size: 28px; font-weight: 700;
    line-height: 1; letter-spacing: .02em;
}
.of-md:nth-child(even) .of-md-num { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #172554; }

.dark .of-md { background: #1f2937; border-color: #374151; }
.dark .of-md-icon { background: #111827; border-color: #374151; box-shadow: none; }
.dark .of-md-title { color: #e5e7eb; }
.dark .of-md-text { color: #9ca3af; }

@media (max-width: 900px) {
    .of-mandate { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .of-md { gap: 16px; min-height: 0; padding: 18px 18px 64px; align-items: flex-start; }
    .of-md-icon { flex-basis: 64px; height: 64px; }
    .of-md-icon .material-symbols-outlined { font-size: 30px; }
    .of-md-title { font-size: 16.5px; }
    .of-md-text { font-size: 14px; }
    .of-md-num { width: 96px; height: 46px; font-size: 22px; padding-right: 14px; }
}

/* ---- Related Offices: ribbon-tab cards ---- */
.of-related {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 26px; max-width: 1160px; margin: 0 auto;
}
.of-rel {
    position: relative; display: flex; flex-direction: column;
    text-decoration: none !important; transition: transform .35s ease;
}
.of-rel:hover { transform: translateY(-5px); }

/* Flat coloured tab, a little wider than the card below it */
.of-rel-tab {
    display: flex; align-items: flex-start; justify-content: center;
    height: 56px; padding-top: 9px; border-radius: 10px 10px 0 0;
    background: #4a72c9;
}
.of-rel-tab .material-symbols-outlined {
    font-size: 24px; line-height: 1; color: #fff;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: transform .35s ease;
}
.of-rel:hover .of-rel-tab .material-symbols-outlined { transform: scale(1.1); }

/* The tab's lower ends fold back beside the card: a darker strip that
   finishes in a diagonal, like a ribbon wrapped behind it. */
.of-rel::before, .of-rel::after {
    content: ""; position: absolute; top: 40px; width: 10px; height: 26px;
    background: #3559a8;
}
.of-rel::before { left: 0;  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%); }
.of-rel::after  { right: 0; clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); }

.of-rel-card {
    position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center;
    margin: -16px 10px 0; padding: 22px 20px 22px; text-align: center;
    background: #fff; border-radius: 3px 3px 12px 12px;
    box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .35), 0 1px 4px rgba(15, 23, 42, .06);
}
.of-rel-title {
    display: block; margin-bottom: 10px; color: #3a62bd;
    font-family: 'Open Sans', sans-serif; font-size: 15.5px; font-weight: 700;
    line-height: 1.3; letter-spacing: .02em; text-transform: uppercase;
}
.of-rel-text { display: block; margin-bottom: 14px; color: #6b7280; font-size: 13.5px; font-weight: 400; line-height: 1.6; }
.of-rel-link {
    margin-top: auto; display: inline-flex; align-items: center; gap: 4px;
    color: #3a62bd; font-size: 13px; font-weight: 700;
}
.of-rel-link .material-symbols-outlined { font-size: 16px; color: inherit; transition: transform .3s ease; }
.of-rel:hover .of-rel-link .material-symbols-outlined { transform: translateX(4px); }

.dark .of-rel-card { background: #1f2937; }
.dark .of-rel-title, .dark .of-rel-link { color: #93c5fd; }
.dark .of-rel-text { color: #9ca3af; }

@media (max-width: 1023px) { .of-related { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 560px)  { .of-related { grid-template-columns: minmax(0, 1fr); max-width: 360px; } }