.trs-riad-header {
background: var(--trs-offwhite);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--trs-space-sm);
padding-top: var(--trs-space-xs);
padding-bottom: var(--trs-space-lg);
} .trs-riad-header__logo {
width: clamp(140px, 22vw, 280px);
}
.trs-riad-header__logo img {
width: 100%;
height: auto;
display: block;
filter: brightness(0); }
.trs-riad-header__subtitle {
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-label);
font-weight: 500;
color: var(--trs-black);
text-transform: uppercase;
letter-spacing: var(--trs-ls-widest);
margin: 0;
} .trs-riad-header__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-header__spec {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--trs-space-xs);
}
.trs-riad-header__spec-icon {
width: clamp(28px, 4vw, 44px);
height: clamp(28px, 4vw, 44px);
display: flex; align-items: center; justify-content: center;
}
.trs-riad-header__spec-icon img {
width: 100%; height: 100%; object-fit: contain;
filter: brightness(0); }
.trs-riad-header__spec-value {
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-p);
font-weight: 500;
color: var(--trs-black);
line-height: 1;
} .trs-riad-header__reserve {
margin-top: var(--trs-space-sm);
align-self: center;
} .trs-riad-hero-img {
width: 100%;
padding: 0 var(--trs-space-lg);
max-height: clamp(280px, 50vw, 550px);
overflow: hidden;
}
.trs-riad-hero-img img {
width: 100%;
height: 100%;
max-height: clamp(280px, 50vw, 550px);
object-fit: cover;
display: block;
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms var(--trs-ease), transform 600ms var(--trs-ease);
}
.trs-riad-hero-img img.is-visible {
opacity: 1;
transform: translateY(0);
} .trs-riad-intro {
background: var(--trs-offwhite);
}
.trs-riad-intro__cols {
display: flex;
flex-direction: column;
gap: var(--trs-space-lg);
}
.trs-riad-intro__left,
.trs-riad-intro__right {
display: flex;
flex-direction: column;
}
.trs-riad-intro__title { font-size: var(--trs-fs-h2);
font-weight: 500;
line-height: var(--trs-lh-snug);
letter-spacing: var(--trs-ls-wide);
text-transform: uppercase;
margin: 0;
color: var(--trs-black);
} .trs-riad-intro__title .trs-color { color: var(--trs-terracotta); }
.trs-riad-intro__text {
font-size: var(--trs-fs-p-sm);
line-height: var(--trs-lh-relaxed);
} .trs-riad-intro__left .trs-riad-intro__text {
font-size: var(--trs-fs-p-lg);
line-height: var(--trs-lh-loose);
}
.trs-riad-intro__sep {
display: none; }
.trs-riad-intro__cta { align-self: flex-start; } .trs-riad-accordions {
background: var(--trs-offwhite);
padding: 0 var(--trs-spacing-h) var(--trs-spacing-h); } .trs-riad-acc:first-child {
border-top: 1px solid rgba(28,28,28,.1);
}
.trs-riad-acc {
border-bottom: 1px solid rgba(28,28,28,.1);
} .trs-riad-acc__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
box-shadow: none !important; cursor: pointer;
padding: var(--trs-space-md) 0;
text-align: left;
gap: var(--trs-space-md);
}
.trs-riad-acc__title {
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-h4);
font-weight: 500;
color: var(--trs-black);
text-transform: uppercase;
letter-spacing: var(--trs-ls-wide);
line-height: 1;
} .trs-riad-acc__icon {
width: 28px;
height: 28px;
flex-shrink: 0;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.trs-riad-acc__icon-inner {
display: block;
width: 20px;
height: 20px;
position: relative;
}
.trs-riad-acc__icon-inner::before,
.trs-riad-acc__icon-inner::after {
content: '';
position: absolute;
background: var(--trs-black);
border-radius: 0;
transition: transform var(--trs-dur-fast) var(--trs-ease),
opacity   var(--trs-dur-fast) ease;
}
.trs-riad-acc__icon-inner::before {
width: 100%; height: 5px;
top: 50%; left: 0;
transform: translateY(-50%);
}
.trs-riad-acc__icon-inner::after {
width: 5px; height: 100%;
left: 50%; top: 0;
transform: translateX(-50%);
} .trs-riad-acc.is-open .trs-riad-acc__icon-inner::after {
opacity: 0;
transform: translateX(-50%) rotate(90deg);
} .trs-riad-acc__panel {
overflow: hidden;
max-height: 0;
visibility: hidden;
transition: max-height var(--trs-dur-slow) var(--trs-ease),
visibility var(--trs-dur-slow) ease;
}
.trs-riad-acc__panel[hidden] { display: block !important; }
.trs-riad-acc__panel.is-open {
max-height: 2000px; visibility: visible;
}
.trs-riad-acc__content {
padding-bottom: var(--trs-space-lg);
font-size: var(--trs-fs-p-sm);
line-height: var(--trs-lh-relaxed);
color: var(--trs-black);
} .trs-riad-acc__content p    { margin: 0 0 var(--trs-space-sm); font-size: var(--trs-fs-p-sm); }
.trs-riad-acc__content h3   { font-size: var(--trs-fs-h4); margin: var(--trs-space-md) 0 var(--trs-space-sm); }
.trs-riad-acc__content ul   { padding-left: 1.5em; margin: 0 0 var(--trs-space-sm); }
.trs-riad-acc__content li   { margin-bottom: 4px; }
.trs-riad-acc__content img  {
width: 100%; height: auto;
border-radius: 2px;
margin: 0;
} .trs-riad-booking {
width: 100%;
overflow: hidden;
}
.trs-riad-booking__inner {
display: flex;
flex-direction: column;
} .trs-riad-booking__form-col {
background: var(--trs-black);
display: flex;
align-items: center;
padding: var(--trs-space-xl) var(--trs-spacing-h);
}
.trs-riad-booking__form-inner {
display: flex;
flex-direction: column;
gap: var(--trs-space-md);
width: 100%;
max-width: 480px;
}
.trs-riad-booking__title {
color: var(--trs-offwhite);
margin: 0;
} .trs-riad-booking__placeholder {
display: flex;
flex-direction: column;
gap: var(--trs-space-sm);
}
.trs-riad-booking__field {
border: 1px solid rgba(245,242,235,.3);
padding: var(--trs-space-sm) var(--trs-space-md);
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-btn);
color: rgba(245,242,235,.5);
text-transform: uppercase;
letter-spacing: var(--trs-ls-wide);
text-align: center;
}
.trs-riad-booking__btn {
background: var(--trs-terracotta);
color: var(--trs-offwhite);
padding: var(--trs-space-sm) var(--trs-space-md);
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-btn);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--trs-ls-wide);
text-decoration: none;
text-align: center;
display: block;
transition: background var(--trs-dur-fast) ease;
}
.trs-riad-booking__btn:hover { background: var(--trs-red); } .trs-riad-booking__image-col {
aspect-ratio: 1 / 1;
overflow: hidden;
flex-shrink: 0;
}
.trs-riad-booking__image-col img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 600ms var(--trs-ease);
}
.trs-riad-booking__image-col:hover img { transform: scale(1.04); } .trs-riad-gallery {
overflow: hidden;
background: var(--trs-offwhite);
padding: var(--trs-space-lg) 0;
}
.trs-riad-gallery__track {
display: flex;
align-items: center;
gap: clamp(8px, 1.5vw, 16px);
width: max-content;
animation: trs-gallery-scroll 60s linear infinite;
will-change: transform;
}
.trs-riad-gallery__track:hover {
animation-play-state: paused;
}
@keyframes trs-gallery-scroll {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.trs-riad-gallery__item {
flex-shrink: 0;
border-radius: 2px;
overflow: hidden;
}
.trs-riad-gallery__item img {
display: block;
height: auto;
max-height: 300px;
width: auto;
max-width: clamp(200px, 30vw, 480px);
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.trs-riad-gallery__track { animation: none; }
} @media (min-width: 768px) { .trs-riad-intro__cols {
flex-direction: row;
align-items: stretch;
gap: 0;
}
.trs-riad-intro__left  { flex: 1; }
.trs-riad-intro__sep   { display: block; }
.trs-riad-intro__right { flex: 1; } .trs-riad-booking__inner {
flex-direction: row;
align-items: stretch;
}
.trs-riad-booking__form-col  { flex: 0 0 50%; width: 50%; }
.trs-riad-booking__image-col { flex: 0 0 50%; width: 50%; aspect-ratio: 1/1; } .trs-riad-gallery__item img { max-height: 550px; }
}