.trs-riads {
background: var(--trs-black);
} .trs-riads__header {
display: flex;
flex-direction: column;
margin-bottom: var(--trs-space-lg);
}
.trs-riads__title {
margin: 0;
color: var(--trs-offwhite);
}
.trs-riads__title-color {
color: var(--trs-terracotta);
}
.trs-riads__text {
font-size: var(--trs-fs-p);
line-height: var(--trs-lh-relaxed);
color: var(--trs-offwhite);
margin: 0;
} .trs-riads__accordion {
display: flex;
flex-direction: column;
gap: var(--trs-space-md);
} .trs-riad-item {
position: relative;
overflow: hidden;
min-height: clamp(100px, 18vw, 160px);
cursor: pointer;
} .trs-riad-item::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--riad-bg, none);
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform 600ms var(--trs-ease);
}
.trs-riad-item:hover::after {
transform: scale(1.03);
} .trs-riad-item::before {
content: '';
position: absolute;
inset: 0;
background: rgba(28, 28, 28, 0.52);
z-index: 1;
transition: background var(--trs-dur-med) ease;
}
.trs-riad-item.is-open::before {
background: rgba(28, 28, 28, 0.68);
} .trs-riad-item__trigger {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: clamp(100px, 18vw, 160px);
background: none;
border: none;
cursor: pointer;
padding: var(--trs-space-md) var(--trs-spacing-h);
box-shadow: none !important;
} .trs-riad-item.is-open .trs-riad-item__trigger {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: auto; 
z-index: 3;
box-shadow: none;
} .trs-riad-item__logo-closed {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--trs-space-xs);
transition: opacity var(--trs-dur-fast) ease;
}
.trs-riad-item__logo-closed img {
width: clamp(80px, 14vw, 180px);
height: auto;
filter: brightness(0) invert(1);
}
.trs-riad-item__subtitle,
.trs-riad-item__name {
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-label);
font-weight: 500;
color: var(--trs-offwhite);
text-transform: uppercase;
letter-spacing: var(--trs-ls-widest);
} .trs-riad-item__toggle {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: var(--trs-spacing-h);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.trs-riad-item__toggle-icon {
display: block;
width: 25px;
height: 25px;
position: relative;
}
.trs-riad-item__toggle-icon::before,
.trs-riad-item__toggle-icon::after {
content: '';
position: absolute;
background: var(--trs-offwhite);
border-radius: 0px;
transition: transform var(--trs-dur-fast) var(--trs-ease),
opacity   var(--trs-dur-fast) ease;
}
.trs-riad-item__toggle-icon::before {
width: 100%; height: 5px;
top: 50%; left: 0;
transform: translateY(-50%);
}
.trs-riad-item__toggle-icon::after {
width: 5px; height: 100%;
left: 50%; top: 0;
transform: translateX(-50%);
}
.trs-riad-item.is-open .trs-riad-item__toggle-icon::after {
opacity: 0;
transform: translateX(-50%) rotate(90deg);
} .trs-riad-item.is-open .trs-riad-item__logo-closed {
opacity: 0;
pointer-events: none;
} .trs-riad-item__panel {
position: relative;
z-index: 2;
overflow: hidden;
max-height: 0;
transition: max-height var(--trs-dur-slow) var(--trs-ease);
visibility: hidden;
} .trs-riad-item__panel[hidden] { display: block !important; }
.trs-riad-item__panel.is-open {
max-height: 700px;
visibility: visible;
}
.trs-riad-item__panel-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--trs-space-md);
padding: var(--trs-space-md) var(--trs-spacing-h) var(--trs-space-xl);
text-align: center;
} .trs-riad-item__logo-open img {
width: clamp(60px, 10vw, 120px);
height: auto;
filter: brightness(0) invert(1);
} .trs-riad-item__specs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: clamp(20px, 4vw, 60px);
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.trs-riad-item__spec {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--trs-space-xs);
}
.trs-riad-item__spec-icon {
width: clamp(28px, 4vw, 44px);
height: clamp(28px, 4vw, 44px);
display: flex;
align-items: center;
justify-content: center;
}
.trs-riad-item__spec-icon img {
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
}
.trs-riad-item__spec-value {
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-p-lg);
font-weight: 500;
color: var(--trs-offwhite);
line-height: 1;
} .trs-riad-item__description {
font-size: var(--trs-fs-p);
color: rgba(245, 242, 235, 0.9);
line-height: var(--trs-lh-relaxed);
max-width: 680px;
margin: 0;
} .trs-riad-item__cta {
margin-top: var(--trs-space-sm);
align-self: center;
} @media (min-width: 768px) {
.trs-riads__header {
flex-direction: row;
align-items: stretch;
}
.trs-riads__header-left {
flex: 1;
} .trs-riads__header .trs-separation {
background: var(--trs-offwhite);
}
.trs-riads__header-right {
flex: 1;
}
}
@media (min-width: 1024px) {
.trs-riad-item            { min-height: 180px; }
.trs-riad-item__trigger   { min-height: 180px; }
.trs-riad-item__panel.is-open { max-height: 800px; }
}