/* =====================================================================
   Institute-style public shell + homepage.

   Loaded AFTER public.css and only by layouts/public-ddmc.php, so this
   file is overrides and additions -- the colour tokens, .notice-row,
   .content-body, .gallery-thumb and the footer rules all still come
   from public.css.

   No new hues: everything below is built from --brand, --brand-dark,
   --brand-accent, --surface and --border. The extra tokens declared on
   .ddmc-layout are tints and shadows of those, named once here so the
   homepage components stay consistent with each other.
   ===================================================================== */

.ddmc-layout {
    --ink: #1d2733;
    --muted: #667487;
    --line: #e5eaf1;
    --tint: rgba(22, 50, 79, 0.07);
    --radius: 0.65rem;
    --shadow-sm: 0 1px 2px rgba(16, 36, 56, 0.05), 0 4px 12px rgba(16, 36, 56, 0.05);
    --shadow-md: 0 0.6rem 1.6rem rgba(16, 36, 56, 0.13);
}

/* ---- 0. Band rhythm --------------------------------------------------- */
/* Band padding is paid twice per band, so it is the single biggest lever
   on how long the page runs. Scoped to the body class so the rest of the
   site keeps public.css's own spacing. */
.ddmc-layout .section { padding: 1.9rem 0; }

/* ---- 1. Utility strip ------------------------------------------------ */
/* Visible at every width. On a college site the phone number is the most
   asked-for thing on the page, and the live layout hides it below 992px. */
.ddmc-topstrip {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 0.4rem 0;
    font-size: 0.82rem;
}

.ddmc-topstrip-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.ddmc-topstrip-link:hover { color: #fff; }

/* ---- 2. Brand band --------------------------------------------------- */
/* The name gets a band of its own rather than sharing a row with the
   menu. That is the single change that makes the page read as an
   institution instead of a product. */
.ddmc-brand {
    background: #fff;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.ddmc-brand-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.ddmc-crest {
    width: 150px;
    height: 150px;
    object-fit: contain;
    flex: 0 0 auto;
}

.ddmc-crest-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    border-radius: 0.6rem;
    font-size: 2.1rem;
}

.ddmc-brand-name {
    display: block;
    font-weight: 800;
    color: var(--brand);
    line-height: 1.1;
    font-size: clamp(1.4rem, 3.1vw, 2.35rem);
    letter-spacing: -0.015em;
}

.ddmc-brand-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.9rem;
    color: #6b7684;
}

/* The affiliation and address lines are paragraphs, so they arrive with
   a 1rem bottom margin each -- 2rem of dead space inside a band whose
   own padding is 0.6rem. Close it up and let the band's padding be the
   only gap below the address. */
.ddmc-brand-text p { margin-bottom: 0.15rem; }
.ddmc-brand-text p:last-child { margin-bottom: 0; }

.ddmc-brand-text p.bi-geo-alt {
    font-size: 0.85rem;
    color: #6b7684;
}

.ddmc-brand-text p.bi-geo-alt::before { margin-right: 0.3rem; }

.ddmc-brand-aside {
    text-align: right;
    border-left: 1px solid var(--border);
    padding-left: 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #26303d;
}

.ddmc-brand-aside a { color: var(--brand); text-decoration: none; font-weight: 600; }
.ddmc-brand-aside a:hover { color: var(--brand-accent); text-decoration: underline; }

.ddmc-notice-tag {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-accent);
    margin-bottom: 0.15rem;
}

/* Sits inline after the college name, so it needs no block spacing of
   its own -- only a gap from the name and a baseline that lines up. */
.ddmc-estd {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 0.1rem 0.6rem;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand);
    vertical-align: middle;
    white-space: nowrap;
}

.ddmc-affiliation {
    font-size: 0.75rem;
    color: #6b7684;
    line-height: 1.45;
}

/* ---- 3. Navigation strip --------------------------------------------- */
/* Full page width, solid brand colour, sticky. Uppercase and letter-
   spaced so nine items still read as a menu rather than a sentence. */
.ddmc-nav {
    background: var(--brand);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 6px rgba(16, 36, 56, 0.18);
}

.ddmc-nav .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 0.75rem;
    border-bottom: 0;
}

.ddmc-nav .navbar-nav .nav-link:hover,
.ddmc-nav .navbar-nav .nav-link:focus,
.ddmc-nav .navbar-nav .show > .nav-link {
    color: #fff;
    background: rgba(0, 0, 0, 0.16);
}

.ddmc-nav .dropdown-menu {
    border: 0;
    border-top: 3px solid var(--brand-accent);
    border-radius: 0 0 0.4rem 0.4rem;
    box-shadow: 0 0.6rem 1.5rem rgba(16, 36, 56, 0.18);
    margin-top: 0;
}

.ddmc-nav-search .form-control { min-width: 9rem; }

.ddmc-search-btn {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

.ddmc-search-btn:hover { background: #a2761f; border-color: #a2761f; color: #fff; }

/* ---- 4. Slider ------------------------------------------------------- */
/* Still a strip rather than a stage -- the point of this layout is that
   notices and the tile row start near the fold -- but tall enough that
   a photograph of a building reads as one. */
.ddmc-slider {
    position: relative;
    background: var(--brand-dark);
}

.ddmc-slider .carousel-item img {
    width: 100%;
    height: clamp(220px, 31vw, 420px);
    object-fit: cover;
    display: block;
}

/* Dark at both ends: the top edge carries the sticky navigation's
   shadow, the bottom carries the caption and the indicators. */
.ddmc-slider .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(16, 36, 56, 0.34) 0%,
        rgba(16, 36, 56, 0.04) 38%,
        rgba(16, 36, 56, 0.78) 100%);
    pointer-events: none;
}

/* Left-aligned and lifted clear of the tile row that overlaps the
   bottom of the slider. */
.ddmc-slider .carousel-caption {
    left: 6%;
    right: 6%;
    bottom: 4.25rem;
    text-align: left;
    z-index: 3;
    padding: 0;
}

/* Over a photograph a caption needs a ground of its own: whatever is
   behind it, the text stays on a dark panel and stays readable. */
.ddmc-slide-caption {
    display: inline-block;
    background: rgba(16, 36, 56, 0.74);
    border-left: 3px solid var(--brand-accent);
    border-radius: 0.3rem;
    padding: 0.5rem 0.9rem;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    font-weight: 600;
    line-height: 1.35;
}

.ddmc-slider .carousel-indicators { z-index: 4; margin-bottom: 3.4rem; }

.ddmc-slider .carousel-indicators [data-bs-target] {
    width: 26px;
    height: 4px;
    border-radius: 2px;
    border: 0;
    opacity: 0.45;
}

.ddmc-slider .carousel-indicators .active {
    opacity: 1;
    background: var(--brand-accent);
}

.ddmc-slider .carousel-control-prev,
.ddmc-slider .carousel-control-next { z-index: 4; width: 7%; }

@media (prefers-reduced-motion: reduce) {
    .ddmc-slider .carousel-item { transition: none !important; }
}

/* ---- 5. Quick-link tiles --------------------------------------------- */
/* Pulled up over the slider so the four things a visitor most often
   wants sit above the fold. White cards rather than one solid navy bar:
   the bar read as a second navigation strip directly under the first,
   and four separate cards read as four separate choices. */
.ddmc-tiles {
    position: relative;
    z-index: 5;
    margin-top: -2.4rem;
    padding-bottom: 1.4rem;
}

.ddmc-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 76px;
    height: 100%;
    padding: 0.8rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}

.ddmc-tile:hover,
.ddmc-tile:focus-visible {
    transform: translateY(-3px);
    border-color: var(--brand-accent);
    color: var(--brand);
}

.ddmc-tile-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--brand);
    font-size: 1.2rem;
    transition: background .16s ease, color .16s ease;
}

.ddmc-tile:hover .ddmc-tile-icon,
.ddmc-tile:focus-visible .ddmc-tile-icon { background: var(--brand-accent); color: #fff; }

.ddmc-tile-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.25;
}

.ddmc-tile-go {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.85rem;
    transition: transform .16s ease, color .16s ease;
}

.ddmc-tile:hover .ddmc-tile-go { transform: translateX(3px); color: var(--brand-accent); }

/* ---- 6. Announcement ribbon ------------------------------------------ */
/* Navy rather than the full band of gold it used to be: gold across the
   whole width shouted louder than the announcement itself, and left the
   accent colour with nothing to mark. Now the accent is the label. */
.ddmc-layout .announce-strip {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, 0.92);
    border-top: 2px solid var(--brand-accent);
    padding: 0.7rem 0;
}

.ddmc-layout .announce-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-accent);
    color: #fff;
}

.ddmc-layout .announce-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ddmc-layout .announce-more:hover { color: var(--brand-accent); }
.ddmc-layout .announce-more i { transition: transform .15s ease; }
.ddmc-layout .announce-more:hover i { transform: translateX(3px); }

/* ---- 7. Section heading ----------------------------------------------- */
/* One heading rule for every band. The "view all" link rides up onto the
   heading line instead of sitting as a button at the foot of the column:
   it saves a row of vertical space per band, and it puts the way out of
   a list next to the name of the list rather than after it. */
.ddmc-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.05rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
}

.ddmc-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 62px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-accent);
}

.ddmc-head-text { min-width: 0; }

.ddmc-head-title {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.ddmc-head-sub {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.ddmc-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
}

.ddmc-more:hover { color: var(--brand-accent); }
.ddmc-more i { font-size: 0.85rem; transition: transform .15s ease; }
.ddmc-more:hover i { transform: translateX(3px); }

/* "Read more" under a trimmed Principal's message: it looks like a
   .ddmc-more link but is a button that opens the full text in a dialog.
   The [hidden] rule outranks .ddmc-more's display, so the button stays
   hidden until the script decides the message is actually trimmed. */
.ddmc-quote-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
}
.ddmc-readmore {
    margin-left: auto;      /* keep it in the right corner even with no signature */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex: 0 0 auto;
}
.ddmc-readmore[hidden] { display: none; }

/* ---- 8. Prose panel (Principal's message, About tabs) ---------------- */
.ddmc-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}

/* A quotation mark, set large and very pale, marks the message as
   somebody speaking rather than another block of site copy. */
.ddmc-panel-quote { position: relative; }

/* The Principal's message reads as justified prose. */
.ddmc-panel-quote .content-body { text-align: justify; }

.ddmc-panel-quote::before {
    content: "\201C";
    position: absolute;
    top: -0.4rem;
    right: 1.1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--tint);
    pointer-events: none;
}

/* ---- 8a. Paired-band column ------------------------------------------ */
/* Bootstrap makes the two columns of a row equal height, so whichever
   side had less to say used to end in a band of bare background. Making
   the column a flex column and letting its panel take the slack turns
   that leftover into part of the card. */
.ddmc-col { display: flex; flex-direction: column; }

.ddmc-col > .ddmc-panel,
.ddmc-col > .ddmc-dept-grid { flex: 1 1 auto; align-content: flex-start; }

/* Basis 0 so the board takes what is left rather than its own content
   height -- the track inside is several times taller than the window
   that shows it. */
.ddmc-col > .ddmc-notice-board { flex: 1 1 0; height: auto; min-height: 330px; }

/* The Principal's message shares this row with the notice board. A long
   message used to drive the whole band's height, stretching the notice
   board into a tall, near-empty window beside it. Beside the board (lg and
   up) the message is trimmed to a fixed number of lines so its card stays
   about the board's height; the signature underneath stays in view. A short
   message is left untouched, and on small screens (stacked) it flows in
   full. Trimmed, not scrolled -- the full text lives on its own page. */
@media (min-width: 992px) {
    .ddmc-panel-quote .content-body {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;
        overflow: hidden;
    }
}

.ddmc-tabs { border-bottom: 1px solid var(--line); gap: 0.25rem; }

.ddmc-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.ddmc-tabs .nav-link:hover { color: var(--brand); }

.ddmc-tabs .nav-link.active {
    color: var(--brand);
    background: transparent;
    border-bottom-color: var(--brand-accent);
}

/* Floated, so a long message wraps around the photograph instead of
   pushing it into a column of its own. */
.ddmc-principal-photo {
    float: left;
    width: 120px;
    height: 145px;
    object-fit: cover;
    border-radius: 0.5rem;
    margin: 0 1rem 0.5rem 0;
    background: #fff;
    border: 1px solid var(--line);
}

.ddmc-principal-sign {
    clear: both;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    color: var(--brand);
}

.ddmc-principal-sign .small { color: var(--muted); }
.ddmc-principal-sign .small::before { content: "\00B7"; margin-right: 0.5rem; }

/* ---- 9. Notice board ------------------------------------------------- */
/* The list scrolls itself. The track holds the notices twice so the
   animation can loop seamlessly, and the second copy is aria-hidden so
   a screen reader hears each notice once. Duration follows --rows (set
   inline by the view) at roughly 3.5s per notice, so a short list does
   not crawl and a long one does not race. */
.ddmc-notice-board {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    height: 330px;
    overflow: hidden;
    position: relative;
    padding: 0 1rem;
}

.ddmc-notice-board .notice-row {
    border-bottom: 1px dashed var(--line);
    padding: 0.8rem 0;
}

/* The same navy date plate the news and event cards use, so a date
   means one thing everywhere on the page. */
.ddmc-notice-board .notice-date {
    background: var(--brand);
    color: #fff;
}

.ddmc-notice-board .notice-date .d { color: #fff; }
.ddmc-notice-board .notice-date .m { color: rgba(255, 255, 255, 0.72); }

.ddmc-notice-track {
    animation: ddmc-notice-scroll calc(var(--rows, 6) * 3.5s) linear infinite;
}

.ddmc-notice-board:hover .ddmc-notice-track,
.ddmc-notice-board:focus-within .ddmc-notice-track {
    animation-play-state: paused;
}

@keyframes ddmc-notice-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

/* Fade the top and bottom edges so rows enter and leave rather than
   being sliced off by the container. */
.ddmc-notice-board::before,
.ddmc-notice-board::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2.25rem;
    pointer-events: none;
    z-index: 2;
}

.ddmc-notice-board::before { top: 0; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
.ddmc-notice-board::after  { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }

/* Standing still is the right default for anyone who asked for it: the
   board becomes an ordinary scrollable list. */
@media (prefers-reduced-motion: reduce) {
    .ddmc-notice-track { animation: none; }
    .ddmc-notice-board { overflow-y: auto; }
    .ddmc-notice-set:nth-child(2) { display: none; }
}

/* ---- 10. News / events panel ----------------------------------------- */
/* One band, two lists, a tab switch between them. The switch is the
   band's heading: a third heading above it would only repeat what the
   two tabs already say, so the accessible name is carried by a
   visually-hidden h2 in the view instead. */
.ddmc-switch-bar {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.15rem;
}

.ddmc-switch { gap: 0.4rem; flex-wrap: nowrap; }

.ddmc-switch .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -1px;
    padding: 0.65rem 1.3rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

.ddmc-switch .nav-link i { font-size: 1.05rem; }
.ddmc-switch .nav-link:hover { color: var(--brand); }

.ddmc-switch .nav-link.active {
    color: var(--brand);
    border-bottom-color: var(--brand-accent);
}

.ddmc-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.ddmc-pane-sub { font-size: 0.85rem; color: var(--muted); }

/* ---- 10a. Feed card --------------------------------------------------- */
/* News and events share one card. The media strip is always drawn: an
   item with no photograph gets a date plate in the brand colour, so a
   row of cards keeps its shape whether or not staff uploaded pictures,
   and the date is never the thing that goes missing. */
.ddmc-feed-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease;
}

.ddmc-feed-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ddmc-feed-media {
    position: relative;
    flex: 0 0 auto;
    height: 118px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.ddmc-feed-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ddmc-feed-plate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
}

.ddmc-feed-plate .d { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; }

.ddmc-feed-plate .m {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-accent);
}

/* Only on cards that do have a photograph -- the date has to survive
   somewhere, and over the image is the one place it fits. */
.ddmc-feed-pill {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    background: rgba(16, 36, 56, 0.82);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
}

.ddmc-feed-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem 1rem;
}

.ddmc-feed-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

.ddmc-feed-title a { color: var(--ink); text-decoration: none; }
.ddmc-feed-card:hover .ddmc-feed-title a { color: var(--brand); }

.ddmc-feed-meta {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.ddmc-feed-meta i { color: var(--brand-accent); }

.ddmc-feed-excerpt {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 11. Departments -------------------------------------------------- */
.ddmc-dept {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.95rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid transparent;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.92rem;
    transition: border-color .16s ease, transform .16s ease, color .16s ease;
}

.ddmc-dept i { color: var(--muted); font-size: 0.85rem; transition: transform .16s ease, color .16s ease; }

.ddmc-dept:hover {
    border-left-color: var(--brand-accent);
    color: var(--brand);
    transform: translateX(2px);
}

.ddmc-dept:hover i { color: var(--brand-accent); transform: translateX(3px); }

/* ---- 12. Link strip --------------------------------------------------- */
.ddmc-linkstrip {
    background: var(--brand-dark);
    padding: 1.4rem 0;
}

.ddmc-link-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 100%;
    min-height: 52px;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
}

.ddmc-link-box:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

/* ---- 13. Gallery ------------------------------------------------------ */
.ddmc-album { display: block; text-decoration: none; }

.ddmc-album-frame {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.ddmc-album-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 36, 56, 0) 55%, rgba(16, 36, 56, 0.55) 100%);
    pointer-events: none;
}

/* Shorter than public.css's 190px, and square-cornered because the
   frame around it carries the radius. */
.ddmc-album .gallery-thumb {
    height: 165px;
    border-radius: 0;
    transition: transform .3s ease;
}

.ddmc-album:hover .gallery-thumb { transform: scale(1.05); }

.ddmc-album-count {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(16, 36, 56, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}

.ddmc-album-caption {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.ddmc-album:hover .ddmc-album-caption { color: var(--brand); }

/* ---- 14. Footer ------------------------------------------------------- */
.ddmc-footer { padding: 1.6rem 0 1rem; }
.ddmc-footer .footer-rule { margin: 1.25rem 0 0.75rem; }

.ddmc-footer .footer-heading {
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-accent);
    display: inline-block;
}

.ddmc-copyright { padding-top: 0.25rem; }

/* ---- 15. Small screens ------------------------------------------------ */
@media (max-width: 1199.98px) {
    /* The nav collapses to the toggler here, so the strip becomes a
       stacked panel and the uppercase row styling has to go with it. */
    .ddmc-nav .navbar-nav .nav-link {
        padding: 0.6rem 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .ddmc-nav .dropdown-menu { border-top: 0; box-shadow: none; }
    .ddmc-nav-search .form-control { width: 100%; }
}

@media (max-width: 991.98px) {
    .ddmc-layout .section { padding: 1.4rem 0; }

    .ddmc-brand-aside {
        text-align: left;
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 0.6rem;
    }

    .ddmc-brand-link { gap: 0.75rem; }
    /* Proportionate to the 150px desktop crest -- dropping straight to
       48px read as the logo disappearing at the breakpoint. */
    .ddmc-crest { width: 90px; height: 90px; }

    .ddmc-slider .carousel-caption { bottom: 3.5rem; }
}

@media (max-width: 767.98px) {
    /* Two tabs at 1rem plus their icons overflow a phone, so the switch
       scrolls sideways rather than wrapping into two rows. */
    .ddmc-switch-bar { overflow-x: auto; justify-content: flex-start; }
    .ddmc-switch .nav-link { padding: 0.6rem 0.9rem; font-size: 0.92rem; }

    .ddmc-pane-head { flex-wrap: wrap; gap: 0.4rem; }
}

@media (max-width: 575.98px) {
    .ddmc-tiles { margin-top: -1.4rem; padding-bottom: 1rem; }
    .ddmc-tile { min-height: 64px; padding: 0.65rem 0.75rem; gap: 0.55rem; }
    .ddmc-tile-icon { width: 36px; height: 36px; font-size: 1rem; }
    .ddmc-tile-label { font-size: 0.84rem; }
    .ddmc-tile-go { display: none; }

    .ddmc-principal-photo { width: 92px; height: 112px; }
    .ddmc-slider .carousel-caption { display: none !important; }
}