.page-node-type-event-highlights .field--name-field-thumbnail {display:none;}

.greyfilter {
  webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
}

#block-views-block-index-banner-block-1 .swiper-slide{
    aspect-ratio: 1920 / 600;
    max-height: 600px;
}

@media screen and (min-width: 1921px){
    #block-views-block-index-banner-block-1 .swiper-slide{
        max-height: unset;
    }

}

@media screen and (max-width: 992px){
    #block-views-block-index-banner-block-1 .swiper-slide{
        aspect-ratio: auto;
        /* max-height: unset; */
        height: auto;
        max-height: 980px;
    }

    #block-views-block-index-banner-block-1 .swiper-slide .views-field .field--name-field-media-video-file .field__item{
        align-items: center;
    }

    #block-views-block-index-banner-block-1 .swiper-slide .views-field .field--name-field-media-video-file .field__item video {
        /* width: auto !important; */
        /* height: 86% !important; */
        /* max-width: max-content; */
    }

}

@media screen and (max-width: 992px) and (orientation: landscape) {
    #block-views-block-index-banner-block-1 .swiper-slide{
        max-height: 840px;
    }
}

@media screen and (max-width: 792px){

    #block-views-block-index-banner-block-1 .swiper-slide .views-field .field--name-field-media-video-file .field__item video {
        width: auto !important;
        max-width: max-content;
    }
}

#block-views-block-index-banner-block-1 .swiper-slide .views-field,
#block-views-block-index-banner-block-1 .swiper-slide .views-field a > div,
#block-views-block-index-banner-block-1 .swiper-slide .views-field a > div img,
#block-views-block-index-banner-block-1 .swiper-slide .views-field .field-content,
#block-views-block-index-banner-block-1 .swiper-slide .views-field .media--type-video,
#block-views-block-index-banner-block-1 .swiper-slide .views-field .field--name-field-media-video-file,
#block-views-block-index-banner-block-1 .swiper-slide .views-field .field--name-field-media-video-file .field__item{
    height: 100%;
}

#block-views-block-index-banner-block-1 .swiper-slide .views-field a > div img{
    object-fit: cover;
    object-position: top;
}

#block-views-block-index-banner-block-1 .swiper-slide .views-field .field--name-field-media-video-file{
    width: 100%;
}

#block-views-block-index-banner-block-1 .swiper-slide .views-field .field--name-field-media-video-file .field__item{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    background: black;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


#block-views-block-index-banner-block-1 .swiper-slide .views-field .field--name-field-media-video-file .field__item video {
    width: 100%;
    height: auto;
}

.item.swiper-slide:has(.views-field-field-banner-video video) .views-field-title {
  display: none;
}

#block-headerlinks img{
    object-fit: contain;
}

.listing-timeline-filter select{
    max-width: 160px;
}

.node--type-programme-detail .field--name-field-fb-link{
    padding-bottom: 10px;
}

.node--type-programme-detail .field--name-field-fb-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold; 
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
}

.node--type-programme-detail .field--name-field-ig-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white !important; 
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease; 
}

.node--type-programme-detail .field--name-field-fb-link a:hover ,
.node--type-programme-detail .field--name-field-ig-link a:hover {
    transform: scale(1.05);
}

.node--type-programme-detail .field--name-field-fb-link{
    display: inline-block;
    width: auto;    
}

.node--type-programme-detail .field--name-field-ig-link{
    display: inline-block;
    width: 70%;
}


/* homepage dve */

/* .hp-blist-wrapper {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.hp-blist-section {
  flex: 1 1 300px;
  padding: 3% 4%;
  color: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.hp-blist-section:first-child {
  flex: 1 1 40%;
  max-width: 40%;
  padding-left: 14%;
}

.hp-blist-section:not(:first-child) {
  flex: 1 1 30%;
  max-width: 30%;
}

.hp-blist-section h3 {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.8rem;
  font-weight: bold;
}

.hp-blist-section h4,
.hp-blist-section ol,
.hp-blist-section li,
.hp-blist-section a{
  color: #000000;
}

.hp-blist-section a{
    text-decoration: none;
}

.hp-blist-section h4 {
  margin: 20px 0 10px;
  font-size: 1.3rem;
  font-weight: bold;
}

.hp-blist-section ol {
  list-style: none;
  padding-left: 0;
  margin: 0 0 15px 0;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.hp-blist-section li {
  padding-left: 0;
}

@media (max-width: 900px) {
    .hp-blist-section,
    .hp-blist-section:first-child,
    .hp-blist-section:not(:first-child){
        flex: 1 1 100%;
        max-width: 100%;
    }

    .hp-blist-section{
        padding: 10%;
    }
} */

.mobile-br,
.hp-blist-diploma br {
  display: none !important;
}

.hp-blist-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

/* Section Common Styles */
.hp-blist-section {
  flex: 1 1 300px;
  padding: 40px 35px 90px 70px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Color Themes & Backgrounds */
.hp-blist-section.business {
  background: linear-gradient(to right, #9ed9f8 10%, #ffffff 120%);
  /* Light Blue Pastel to White (extended) */
  color: #00ADEF;
  padding: 40px 50px 90px 10%;
  padding: 40px 50px 90px 15%;
  flex: 1 1 380px;
}

.hp-blist-section.engineering {
  background: linear-gradient(to right, #fbe39a 10%, #ffffff 120%);
  /* Light Orange Pastel to White (extended) */
  color: #FDB924;
}

.hp-blist-section.design {
  background: linear-gradient(to right, #e2e69a 10%, #ffffff 120%);
  /* Light Green Pastel to White (extended) */
  color: #bAC405;
}

/* Headers */
/* Headers */
.hp-blist-header {
  margin-bottom: 20px;
}

.hp-blist-top-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hp-blist-section h3 {
  margin: 0 0 10px 0;
  font-size: 2rem;
  font-weight: 800;
  /* Extra bold */
  line-height: 1.2;
}

html[lang="en"] .hp-blist-section.engineering h3{
    padding-bottom: 5%;
}

/* Base Pill Style for ALL h4 (Diploma, S3, S6) */
.hp-blist-section h4 {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 50px;
  /* Pill Shape */
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 20px 0 10px 0;
  text-transform: none;
  border: none;
  line-height: 1.2;
  width: fit-content;
}

/* 1st h4: Diploma of Vocational Education */
/* Dynamic color based on section */
.hp-blist-section .hp-blist-diploma {
  background-color: #00ADEF;
  /* Vibrant Cyan/Blue */
}

.hp-blist-section.engineering .hp-blist-diploma {
  background-color: #FDB924;
}

.hp-blist-section.design .hp-blist-diploma {
  background-color: #bAC405;
}

/* 2nd h4: S3 (Full-time Post S3) - Lime Green */
.hp-blist-section .hp-blist-body h4:nth-of-type(1) {
  background-color: #bAC405;
}

/* 3rd h4: S6 (Full-time Post S6) - Cyan Blue */
.hp-blist-section .hp-blist-body h4:nth-of-type(2) {
  background-color: #00ADEF;
}

/* .hp-blist-section.business .hp-blist-body{
    padding-left: 4rem;
} */


/* Class to remove margin-top for Diploma headers */
.hp-blist-diploma {
  margin-top: 0 !important;
}

/* Links & List Items */
.hp-blist-section ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hp-blist-section li {
  padding: 5px 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  /* Very subtle separator */
}

.hp-blist-section li:last-child {
  border-bottom: none;
}

.hp-blist-section a {
  text-decoration: none;
  color: inherit;
  /* Use section text color */
}

.hp-blist-section a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 970px) {
  .hp-blist-wrapper {
    flex-direction: column;
  }

  .hp-blist-section {
    width: 100%;
    flex: auto;
    padding: 35px 12%;
    cursor: pointer;
  }

  /* Flex Top Bar for Mobile */
  .hp-blist-top-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
  }

  .hp-blist-section h3 {
    font-size: 1rem;
    margin: 0;
  }

  /* Centered Diploma Pill on Mobile */
  .hp-blist-section h4.hp-blist-diploma {
    margin: 0 !important;
    font-size: 0.8rem;
    padding: 6px 15px;
    text-align: center;
    /* Center text */
    line-height: 1.2;
    height: fit-content;
  }

  /* Show break on mobile */
  .mobile-br,
  .hp-blist-diploma br {
    display: inline !important;
  }

  /* Accordion Content */
  .hp-blist-body {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    animation: fadeInDVE 0.3s ease;
  }

  .hp-blist-section.active .hp-blist-body {
    display: block;
  }

  html[lang="en"] .hp-blist-section.design h3 {
    width: min-content;
  }

  .hp-blist-section.business {
    padding: 35px 12%;
    flex: auto;
  }

}

@keyframes fadeInDVE {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.node .field--name-field-display-date > .field__item:not(:first-child) > time{
    padding-left: 1.5rem;
}

body.page-node-type-pbl-details-page-v2-0 .node__meta,
body.page-node-type-pbl-details-page-v2-0 .submitted,
body.page-node-type-pbl-v2-0 .node__meta,
body.page-node-type-pbl-v2-0 .submitted,
body.page-node-type-open-day-ver-2-0 .node__meta,
body.page-node-type-open-day-ver-2-0 .submitted{
  display: none !important;
}

html:not([lang="en"]) .views-field-field-banner-title h1 strong {
  font-size: calc(1em + 2px);
  font-weight: bold;
}

.views-field-field-banner-video .field-content {
    position: relative;
    width: 100%;
    height: 100%;
}

 /* Custom Button Positioning */
    .play-pause-btn,
    .mute-unmute-btn {
        position: absolute;
        z-index: 100;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        border: 2px solid rgba(255, 255, 255, 0.8);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        padding: 0;
    }

    .play-pause-btn {
        bottom: 30px;
        left: 30px;
    }

    .mute-unmute-btn {
        top: 30px;
        right: 30px;
    }

    .play-pause-btn:hover,
    .mute-unmute-btn:hover {
        background-color: rgba(0, 0, 0, 0.8);
        transform: scale(1.1);
    }

    .play-pause-btn svg {
        margin-left: 2px;
        /* Visual center adjustment */
    }

    .views-field-field-banner-video video::-webkit-media-controls {
        opacity: 0;
        transition: opacity 0.6s ease;
        pointer-events: none;   /* 避免沒顯示時還能點到 */
    }
	
	
.tabs li:has(a[data-drupal-link-system-path$="to-preview"]){
	display:none !important;
}


.icon-tabs {
    list-style: none;
    padding: 0;
    margin: 0
}

@media screen and (min-width: 992px) {
    .icon-tabs li {
        text-align:center
    }
}


/* test effect .icon-tabs */

/* .icon-tabs li a {
    position: relative;
    padding: 1rem;
    color: #000;
    font-family: "Catamaran","Noto Sans TC";
    font-weight: bold;
    background: linear-gradient(to right, #FAA61A 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.6s ease;
}

@media screen and (min-width: 992px) {
    .icon-tabs li a {
        padding:2rem 1rem
    }

    .icon-tabs li a::after {
        content: '';
        display: block
    }
}

.lang--zh-hans .icon-tabs li a {
    font-family: "Catamaran","Noto Sans SC"
}

.icon-tabs li a:hover,.icon-tabs li a:focus,.icon-tabs li a.active {
    background-position: 0 0;
}

.icon-tabs li a:hover:after,
.icon-tabs li a:focus:after,
.icon-tabs li a.active:after {
    background: url(../img/polygon.svg) no-repeat;
    background-size: cover;
    background-position: center;
    width: 100px;
    height: 100%;
    position: absolute;
    right: -80px;
    top: 0;
    z-index: -1;
    animation: slideInLeft 0.6s ease 0.6s forwards;
    opacity: 0;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-80px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.icon-tabs li a:hover svg path,.icon-tabs li a:hover svg .hover,.icon-tabs li a:focus svg path,.icon-tabs li a:focus svg .hover,.icon-tabs li a.active svg path,.icon-tabs li a.active svg .hover {
    fill: #fff8c6
}

.icon-tabs li a:hover svg .dark,.icon-tabs li a:hover svg .stroke,.icon-tabs li a:focus svg .dark,.icon-tabs li a:focus svg .stroke,.icon-tabs li a.active svg .dark,.icon-tabs li a.active svg .stroke {
    fill: black
}

.icon-tabs li svg {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem
}

@media screen and (min-width: 992px) {
    .icon-tabs li svg {
        margin-right:0;
        margin-bottom: 0.5rem;
        width: 5rem;
        height: 5rem
    }
}

.table.schedule-table th{
    border-top: transparent;
} */

/* --- 基礎設定 --- */
.icon-tabs li a {
    position: relative; /* 定位基準 */
    padding: 1rem;
    color: #000;
    font-family: "Catamaran", "Noto Sans TC", sans-serif;
    font-weight: bold;
    display: flex;       
    align-items: center; 
    text-decoration: none;
    
    /* 確保所有 btnTab 本身嘅背景被清空，俾底層顯示 */
    background-color: transparent !important; 
    
    /* 注意：呢度一定要攞走 overflow: hidden; 否則個箭嘴會俾佢剪走! */
    z-index: 1; 
}

/* 👇👇 新增：橙色滑動背景板 (改用寬度 0 -> 100% 變大，代替 translateX 飛入) 👇👇 */
.icon-tabs li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* 一開始闊度係 0，即係睇唔到 */
    height: 100%;
    background-color: #FAA61A; 
    z-index: -2; /* 擺喺最底 */
    
    /* 用變大個闊度黎做由左至右滑動效果 */
    transition: width 0.6s ease;
}

@media screen and (min-width: 992px) {
    .icon-tabs li a {
        padding: 2rem 1rem;
    }

    .icon-tabs li a::after {
        content: '';
        display: block;
    }
}

.lang--zh-hans .icon-tabs li a {
    font-family: "Catamaran", "Noto Sans SC", sans-serif;
}

/* --- 👇 Hover / Focus / Active 觸發背景滑入 👇 --- */
.icon-tabs li a:hover::before,
.icon-tabs li a:focus::before,
.icon-tabs li a.active::before {
    /* 將背景板闊度展開到 100%，做到由左至右滑入 */
    width: 100%; 
}


/* --- Polygon 動畫設定 (保留你原本嘅設定，而家唔會再俾 overflow: hidden 剪走) --- */
.icon-tabs li a:hover:after,
.icon-tabs li a:focus:after,
.icon-tabs li a.active:after {
    background: url(../img/polygon.svg) no-repeat;
    background-size: cover;
    background-position: center;
    width: 100px;
    height: 100%;
    position: absolute;
    right: -80px;
    top: 0;
    z-index: -1;
    animation: slideInLeft 0.6s ease 0.6s forwards; 
    opacity: 0;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-80px); 
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/* --- Icon (SVG) 同 字體 顏色變化 --- */
.icon-tabs li svg,
.icon-tabs li a {
    transition: color 0.6s ease, fill 0.6s ease;
}

.icon-tabs li svg path,
.icon-tabs li svg .hover,
.icon-tabs li svg .dark,
.icon-tabs li svg .stroke {
    transition: fill 0.6s ease;
}

/* Hover 時 SVG 顏色變換 */
.icon-tabs li a:hover svg path,
.icon-tabs li a:hover svg .hover,
.icon-tabs li a:focus svg path,
.icon-tabs li a:focus svg .hover,
.icon-tabs li a.active svg path,
.icon-tabs li a.active svg .hover {
    fill: #fff8c6; /* 呢個好似係淺黃色，如果你想用橙色底變白色可以改做 #fff */
}

.icon-tabs li a:hover svg .dark,
.icon-tabs li a:hover svg .stroke,
.icon-tabs li a:focus svg .dark,
.icon-tabs li a:focus svg .stroke,
.icon-tabs li a.active svg .dark,
.icon-tabs li a.active svg .stroke {
    fill: black;
}


/* --- 其他針對大螢幕同表格嘅設定 --- */
.icon-tabs li svg {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
}

@media screen and (min-width: 992px) {
    .icon-tabs li svg {
        margin-right: 0;
        margin-bottom: 0.5rem;
        width: 5rem;
        height: 5rem;
    }
}

.table.schedule-table th {
    border-top: transparent;
}

.hp-tab-title{
    cursor: pointer;
}

@media screen and (max-width: 1024px){
    .page-node-type-open-day-ver-2-0 .row-cols-md-4>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 55%;
        flex: 0 0 55%;
        max-width: 55%;
    }
}

.listing-timeline-filter .form-item-year{
    order: 1;
}

.listing-timeline-filter .form-item-month{
    order: 2;
}

.listing-timeline-filter .form-item-campus-id{
    order: 3;
}

.listing-timeline-filter .form-item-k{
    order: 4;
}

.listing-timeline-filter .form-actions{
    order: 5;
}

.js-form-item-field-campus-target-id{
    display: flex;
    align-items: center;
    gap: 10px;
}

.js-form-item-field-campus-target-id::before{
    content: "";
    display: block;
    background-size: 1.5rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin-right: .5rem;
    background-image: url(/themes/vtcyc/img/icons/location_on_white.svg);
    background-color: #B2D235;
}

.js-form-item-year{
    order: 1;
}

.js-form-item-field-campus-target-id{
    order: 2;
}

.js-form-item-campus-id{
    order: 3;   
}

.form-item-month{
    order: 2;
}

.form-item-k{
    order: 4;
}

.form-actions{
    order: 5;
}

.textonly #block-views-block-index-banner-block-1 .swiper-slide{
  aspect-ratio: auto;
}

.textonly #block-views-block-index-banner-block-1 {
    background-color: #fff;
}

.textonly .banner-infos-mix-div{
    color: black;
}

.textonly .banner-infos-mix-div h1 strong, 
.textonly .banner-infos-mix-div h2 strong, 
.textonly .banner-infos-mix-div h3 strong, 
.textonly .banner-infos-mix-div h4 strong, 
.textonly .banner-infos-mix-div h5 strong, 
.textonly .banner-infos-mix-div h6 strong, 
.textonly .banner-infos-mix-div p strong{
    color: black;
}