/*
 *
 * CityUHK SDG Report Website
 * ----------------------------
 * Site Specific CSS
 * 
 * Ported to cityu-template-3
 *
 */

/* ==================== General ==================== */

.cityu-header {
    background-color: white !important;
}
html {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
body {
    background: transparent !important;
    background-color: transparent !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cityu {
    background: transparent !important;
    background-color: transparent !important;
    overflow-x: hidden !important;
}
.cityu-main {
    min-height:auto !important;
    padding-bottom: 2em !important;
    background: transparent !important;
    background-color: transparent !important;
}
.cityu-main-inner {
    background: transparent !important;
    background-color: transparent !important;
}
.section-wrap:not(.section-dark) {
    background: transparent !important;
    background-color: transparent !important;
}
.section-wrap:not(.section-dark) > .section-content {
    background: transparent !important;
    background-color: transparent !important;
}
#videoBG {
    object-fit: cover !important;
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -100 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.content-color-default h1, .content-color-default h2 {
    color: white !important;
    -webkit-text-fill-color: white !important;
}
.intro-bg {
    background-color: rgba(0, 0, 0, 0.7);
    color: #CCCCCC;
    padding: 2rem;
    text-shadow: 1px 1px 3px #000000;
}

/* ==================== /General ==================== */

/* ==================== Card Flipping ==================== */
.flip {
    position: relative;
    z-index: 1035 !important;
}
.flip > .front,
.flip > .back {
    display: block;
    transition-duration: 0.6s;
    transition-property: transform, opacity;
}
.flip > .front {
    transform: rotateY(0deg);
}
.flip > .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
}
.flip:hover > .front {
    transform: rotateY(180deg);
}
.flip:hover > .back {
    opacity: 1;
    transform: rotateY(0deg);
}
.flip.flip-vertical > .back {
    transform: rotateX(-180deg);
}
.flip.flip-vertical:hover > .front {
    transform: rotateX(180deg);
}
.flip.flip-vertical:hover > .back {
    transform: rotateX(0deg);
}

.flip {
    position: relative;
    display: inline-block;
}
.flip > .front,
.flip > .back {
    display: block;
    color:transparent !important;
    width: inherit;
    background-size: cover !important;
    background-position: center !important;
}
.flip > .front p,
.flip > .back p {
    font-size: 0.9125rem;
    line-height: 160%;
    color: #999;
}

.front img, .back img {
    max-width: 99%;
}

/* ==================== /Card Flipping ==================== */

/* ==================== SDG Card Grid ==================== */

.sdg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.sdg-grid .sdg-card {
    width: calc(16.666% - 0.75rem);
    min-width: 120px;
}
.sdg-card a {
    display: block;
    text-decoration: none;
}
.sdg-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==================== /SDG Card Grid ==================== */

/* ==================== Report Download ==================== */

.sdg-download {
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    padding: 1.5rem;
    display: inline-block;
}
.sdg-download img {
    max-width: 280px;
    width: 100%;
    height: auto;
}

/* ==================== /Report Download ==================== */

/* ==================== SDG Dropdown Menu (two-column) ==================== */

.sdg-dropdown .dropdown-menu.sdg-dropdown-menu {
    min-width: 480px !important;
    flex-wrap: wrap !important;
}
.sdg-dropdown .dropdown-menu.sdg-dropdown-menu.show {
    display: flex !important;
}


/* ==================== /SDG Dropdown Menu ==================== */

/* ==================== New Template: Brand & Utilities ==================== */

:root {
    --CityUHK-Black: rgba(35, 31, 32, 1);
    --CityUHK-Red: rgba(176, 17, 23, 1);
    --CityUHK-Orange: rgba(225, 117, 65, 1);
    --CityUHK-gradient: linear-gradient(90deg, rgba(223,116,51,1) 0%, rgba(218,86,43,1) 38%, rgba(204,16,60,1) 73%, rgba(166,33,86,1) 100%);
}
.text-color-CityUHK-Black { color: var(--CityUHK-Black) !important; }
.text-color-CityUHK-Red { color: var(--CityUHK-Red) !important; }
.text-color-CityUHK-Orange { color: var(--CityUHK-Orange) !important; }

.cityu h3 { font-size: 28px !important; }
.ciro-letter-space-2 { letter-spacing: 2px !important; }
.ciro-letter-space-4 { letter-spacing: 4px !important; }
.ciro-nowrap { white-space: nowrap !important; }
.text-source { font-size: .75rem !important; }

.cityu .image-banner-wrap { aspect-ratio: 1920/980 !important; }
.cityuhk-video-box-banner video { width: 100%; }
.cityuhk-video-box video { width: 100%; }

/* ==================== /New Template: Brand & Utilities ==================== */

/* ==================== Media Queries ===================== */

@media (max-width: 991.98px) {
    .sdg-grid .sdg-card { width: calc(25% - 0.75rem); }
}

@media (max-width: 575.98px) {
    .sdg-grid .sdg-card { width: calc(33.333% - 0.75rem); }
    .intro-bg { padding: 1rem 1.25rem; }
    .sdg-dropdown .dropdown-menu.sdg-dropdown-menu { min-width: unset !important; }
    .sdg-dropdown-menu > li { width: 100%; }
}

/* ==================== /Media Queries ===================== */

/* ==================== Print ==================== */

@media print {
    .SDG-title img {
        height: 200px !important;
    }
}

/* ==================== /Print ==================== */