:root {
    --Primary-900: #0B1924;
    --Primary-800: #2D3C46;
    --Primary-700: #46555F;
    --Primary-600: #697882;
    --Primary-500: #7E8D9D;
    --Primary-400: #8F9FB3;
    --Primary-300: #AAB9C3;
    --Primary-200: #E1E6EA;
    --Primary-100: #F1F3F5;
    
    --Secondary-900: #130204;
    --Secondary-800: #4B060E;
    --Secondary-700: #840B19;
    --Secondary-600: #BD0F24;
    --Secondary-500: #ED1B32;
    --Secondary-400: #F04356;
    --Secondary-300: #F47F8C;
    --Secondary-200: #F696A0;
    --Secondary-100: #FAB8BE;

    --Grey-900: #1E1E20;
    --Grey-800: #45474A;
    --Grey-700: #595B5F;
    --Grey-600: #777A7E;
    --Grey-500: #93969A;
    --Grey-400: #AFB1B4;
    --Grey-300: #C1C3C4;
    --Grey-200: #D2D4D5;
    --Grey-100: #DBDCDE;
    --Grey-50: #E4E5E6;
    --Grey-25: #FBFBFB;
    --Grey-0: #fff;

    --State-success: #4CAF50;
    --State-warning: #FF9800;
    --State-error: #F44336;

    /* box-shadow */
    --elevation: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(31, 39, 47, 0.30);
}

/* FIXME: The sticky header menu has a very large z-index. When opening the gallery in hotel-details template, the header is overlaying the gallery content. To fix this, the z-index of the content conatiner (z-index = 10 is default value from avada theme) is changed to be higher than the header menus default z-index */
#post-2250 .post-content .fusion-fullwidth:nth-child(2) .fusion-row {
    z-index: 200052; /* the default z-index of the sticky header in avada css is --awb-z-index: 200051; */
}

.bodycopy-1 {
    font-size: 20px;
    font-style: normal;
    font-weight: 350;
    line-height: 135%; /* 27px */
}
.bodycopy-2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 350;
    line-height: 135%; /* 24.3px */
}

.quote {
    font-size: 26px;
    font-family: "GT Eesti Pro Text - thin italic", sans-serif;
    font-weight: 400;
    letter-spacing: 0.8px;
    line-height: 1.2;
}

.button-md {
    color: var(--Primary-900, #0C0F12);
    text-align: center;
    font-family: "GT Eesti Pro Text - medium", sans-serif;

    /* Button/48px/medium */
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.0;
}

.tt-hotel-details__wrapper {
    margin: 0 auto;
}

.tt-hotel-details__gallery-button:hover .button-md {
    color: var(--Grey-0, #FFF);
}

.tt-hotel-details__gallery-button:hover svg path {
    fill: var(--Grey-0, #FFF);
}

.tt-hotel-details__gallery-button:hover {    
    background-color: var(--Grey-900, #000);
    cursor: pointer;
}

.color-primary-600 {
    color: var(--Primary-600, #465769);
}
.color-primary-700 {
    color: var(--Primary-700, #46555F);
}
.color-primary-900 {
    color: var(--Primary-900, #0C0F12);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--body_typography-font-family);
    font-weight: 350;
    font-size: 18px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--Primary-900, #0C0F12);
}

a, button {
    -o-transition: color .2s ease, 0.2s ease;
    -ms-transition: color .2s ease, 0.2s ease;
    -moz-transition: color .2s ease, 0.2s ease;
    -webkit-transition: color .2s ease, 0.2s ease;
    transition: color .2s ease, 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.tt-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    width: 100%;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.tt-nowrap {
    flex-wrap: nowrap;
}

.tt-img {
    display: inline-block;
    width: 100%;
    line-height: 0!important;
    object-fit: cover; 
    border-radius: 8px;
}

.tt-img-lg {
    aspect-ratio: 3 / 2; 
    max-width: 718px;
}

.tt-img-sm {
    aspect-ratio: 3 / 2; 
    max-width: 353px;
}

.tt-img-gm {
    aspect-ratio: 5 / 6; 

}

.tt-icon {
    color: #ffffff;
    text-align: center;
    display: inline-block;
}

.tt--lineheight-1 {
    line-height: 1;
}

.tt--stretch-self {
    align-self: stretch;
}

.tt--flex-dir-row {
    flex-direction: row;
}

.tt-container {
    width: 100%;
    height: 100vh;
}


/* START hotel item specific styling */
.tt-hotellist-wrapper table {
    border-collapse: separate;
    border-spacing: 16px;
}

.hotellist {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 80px;
}

.tt-hotel-item {
    max-width: 1280px;
    padding: 28px;
    border-radius: 8px;
    align-items: center;
    justify-content: flex-start;
}

.tt-hotel-item.tt-fine-hotel {
    gap: 64px;
    border: 3px solid var(--Primary-900, #0C0F12);
    background: 
        url(../../../uploads/2025/07/hotel-item-lines-top-left.webp) top left no-repeat,
        url(../../../uploads/2025/07/hotel-item-lines-bottom-right.webp) bottom right no-repeat;
    box-shadow: 0px 0px 16px 2px rgba(3, 18, 14, 0.30); /* hotelbox shadow */
}

.tt-hotel-item.tt-hotel-only {
    border: 1px solid var(--Grey-300, #C9CBCC);
}

.tt-hotel-item__img {
    position: relative;
    border-radius: 8px;
}

.tt-hotel-item__img img {
    aspect-ratio: 576 / 322;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.tt-hotel-item__img::after {
    content: url(../../../uploads/2025/07/hotellist-badge.svg);
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    padding: 6px 8px 0px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--Grey-0, #FFF);
    box-shadow: 0px 0px 12px 3px rgba(3, 18, 14, 0.25);
}

.tt-hotel-only .tt-hotel-item__info {
    justify-content: space-between;
    align-items: center;
}

.tt-fine-hotel .tt-hotel-item__name {
    margin-bottom: 20px;
}

.tt-hotel-item__name h4 {
    color: var(--Primary-900, #0C0F12);
    /* Headings/h4 */
    font-size: 28px;
    line-height: 1.25; 
    letter-spacing: 4.8px;
    text-transform: uppercase;
    font-weight: 350;
}

.tt-fine-hotel .tt-hotel-item__location {
    margin-bottom: 16px;
    flex: 1;
}

.tt-hotel-only .tt-hotel-item__location {
    flex: 0;
    white-space: nowrap;
}

.tt-hotel-item__location {
    gap: 8px;
}

.tt-hotel-item__location svg {
    width: 20px;
    height: 22px;
}

.tt-hotel-item__location span {
    color: var(--Primary-900, #0C0F12);
    font-size: 22px;
    font-weight: 400;
    line-height: 100%; /* 28px */
}

.tt-hotel-item__descr {
    height: 82px;
    color: var(--Primary-700, #46555F);
    margin-bottom: 24px;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 516px;
}

.tt-hotel-item_link {
    width: 100%;
    height: 100%;
    max-height: 66px;
}

/* ########## START Hotel Details styling ########### */

.tt-img-wrapper--bronze-silver-gold {
    position: relative;
}

.tt-hero-wrapper--bronze-silver-gold {
    gap: 64px;
} 

.tt-hero-wrapper--bronze-silver-gold  > .tt-div:nth-child(1) {
    max-width: 750px; /* image column */
    flex: 1 0 0;
}

.tt-hero-wrapper--bronze-silver-gold  > .tt-div:nth-child(2) {
    max-width: 466px; /* text column */
    flex: 1 1 0;
}

.tt-hotel-details__info--platinum {
    padding: 64px 0;
    gap: 120px;
}

.tt-hotel-details__info--platinum > .tt-div:nth-child(1) {
    max-width: 694px; /* text column */;
    flex: 1 0 0;
}

.tt-hotel-details__info--bronze-silver-gold h1,
.tt-hotel-details__info--platinum h1 {
    font-size: 32px;
    font-family: "GT Eesti Pro Text - light", sans-serif;
    font-weight: 350;
    line-height: 120%; /* 45.6px */
    letter-spacing: 5.7px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.tt-hotel-details__info--platinum .tt-hotel-detail__location {
    margin-bottom: 48px;
}

.tt-hotel-details__hero-section {
    gap: 64px;
    padding: 0 80px 80px;
}

#tt-hotel-details__hero-col > div,
#tt-hotel-details__hero-col .tt-img-wrapper {
    gap: 12px;
}

.tt-img-wrapper--platinum-lg {    
    position: relative;
}

/* Platinum layout: Use CSS Grid to maintain height equality and width ratio */
.tt-platinum-img-grid.tt-img-wrapper {
    display: grid;
    grid-template-columns: 948fr 320fr; /* Maintains the 948:320 ratio */
    gap: 12px;
    align-items: stretch; /* Ensures both columns have same height */
}

/* Override flex properties for grid children */
.tt-platinum-img-grid > .tt-img-wrapper--platinum-lg,
.tt-platinum-img-grid > .tt-img-wrapper--platinum-sm {
    flex: none; /* Disable flex behavior in favor of grid */
}

/* Ensure the large image fills its grid cell properly */
.tt-platinum-img-grid > .tt-img-wrapper--platinum-lg {
    aspect-ratio: 948 / 663;
    min-height: 0; /* Allow grid to control height */
}

/* Ensure small images column fills its grid cell */
.tt-platinum-img-grid > .tt-img-wrapper--platinum-sm {
    min-height: 0; /* Allow grid to control height */
    justify-content: space-between; /* Distribute the 3 images evenly */
}

/* Remove aspect ratio from small images to maintain 12px gaps */
.tt-platinum-img-grid > .tt-img-wrapper--platinum-sm .tt-img {
    aspect-ratio: auto; /* Let images fill available height naturally */
    height: calc((100% - 24px) / 3); /* Divide height equally minus 2 × 12px gaps */
}

.tt-hotel-detail__location {
    align-items: center;
    gap: 4px;
    margin-bottom: 48px;
}

.tt-hotel-detail__location span {
    color: var(--Primary-800, #2D3C46);
    font-size: 22px;
    line-height: 100%; /* 22px */
}

.tt-hotel-detail__description h2 {
    font-size: 20px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tt-hotel-detail__description p:not(:last-child) {
    margin-bottom: 16px;
}

.tt-hotel-detail__description p {
    color: var(--Primary-800, #2D3C46);
}

.tt-hotel-detail__cta {
    margin: 40px 0 0;
}

.tt-hotel-detail__cta a {
    display: flex;
    padding: 17px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background-color: var(--Primary-900, #0C0F12);    
}

.tt-hotel-detail__cta a span {
    color: var(--Gray-0, #FFF);
    /* Button/64px/bold */
    font-family: var(--button_typography-font-family);
    font-size: 22px;
    font-weight: var(--button_typography-font-weight);
    line-height: 24px; /* 109.091% */
}

.tt-hotel-detail__cta a:hover {
    background: var(--button_gradient_top_color_hover);
    color: var(--button_accent_hover_color, var(--button_accent_color));
    border-color: var(--button_border_hover_color);
}

.tt-map-wrapper {
    flex: 1 1 0; 
    width: 100%;
    max-width: 466px;
}

#map-container {
    position: relative;
    padding-bottom: 60.085837%;
    width: 100%;
}

#map-container iframe {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tt-hotel-details__info--bronze-silver-gold #map-container {
    margin-top: 96px;
}

.tt-hotel-details__gallery-button {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid var(--Primary-900, #0C0F12);
    background: var(--Grey-0, #FFF);
}

.tt-hotel-detail__rating-display {
    gap: 20px;
    margin-bottom: 24px;
}

.tt-hotel-detail__rating {
    flex: 0;
    gap: 12px;
    align-items: center;
}

.tt-hotel-detail__rating-amount,
.tt-hotel-detail__rating span {
    font-size: 44px;
    line-height: 125%; /* 55px */
}

.tt-hotel-detail__rating-separator {
    flex: 0;
    align-self: center;
}

.tt-hotel-detail__rating-amount {
    flex: 0;
    white-space: nowrap;
}

.tt-hotel-detail__testimonial {
    padding: 32px;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 8px;
    background: var(--Grey-0, #FFF);
    /* S - bottom right */
    box-shadow: 7px 8px 14px 0px rgba(3, 18, 14, 0.08);
    margin-bottom: 56px;
}

.tt-hotel-detail__testimonial-name {
    gap: 16px;
}

.tt-hotel-detail__testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background: var(--Primary-600, #465769);
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
}

.tt-hotel-detail__testimonial-avatar span {
    color: var(--Grey-0, #FFF);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    transform: translate3d(1px, 1px, 0);
}

.tt-hotel-detail__testimonial-text {
    color: var(--Primary-700, #46555F);

    font-size: 17px;
    font-weight: 350;
    line-height: 150%; /* 25.5px */
}

.tt-hotel-details__manager-section-wrapper {
    background-color: var(--Primary-100, #F1F3F5);
    padding: 88px 0;
}

.tt-hotel-details__manager-section-row {
    border-top: 1px solid var(--Grey-100, #DBDCDE);
    gap: 72px;
    position: relative;
}

.tt-hotel-details__manager-section-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 430px;
    height: 1px;
    background-color: var(--Grey-100, #DBDCDE);
}

#tt-hotel-details__manager-col {
    max-width: 500px;
    padding: 40px 40px 40px 80px;
    border: 1px solid var(--Grey-100, #DBDCDE);
    border-top-width: 0;
    border-left-width: 0;
}

.tt-manager-img {
    aspect-ratio: 5 / 6; 
    object-fit: cover; 
    width: 100%;
    min-height: 455px;
}

.tt-hotel-details__hotelname-display {
    position: relative;
}

.tt-hotel-details__hotelname-display span {
    position: absolute;
    top: 0;
    left: 60px;
    padding: 0 20px;
    transform: translateY(-50%);
    background-color: var(--Primary-100, #F1F3F5);

    color: var(--Primary-700, #46555F);
    font-size: 20px;
    font-family: "Avenir Next - Heavy", sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    z-index: 1;
}

#tt-hotel-details__quote-col {
    align-self: center;
    padding-right: 80px;
}

.tt-hotel-details__quote {
    gap: 32px;
    position: relative;
}

.tt-hotel-details__quote p {
    color: var(--Primary-900, #0C0F12);
}

.tt-hotel-details__quoter {
    gap: 17px;
    position: relative;
    width: auto;
}

.tt-hotel-details__quoter::after {
    content: '';
    position: absolute;
    border-top: 1px solid var(--Grey-100, #DBDCDE);
    width: calc(100% + 64px);
    top: calc(50% + 2px);
}

.tt-hotel-details__quoter-name {
    font-size: 24px;
}

.tt-hotel-details__quoter-role {
    color: var(--Primary-700, #46555F);
    font-size: 18px;
    font-family: "Avenir Next - Heavy", sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.tt-hotel-details__highlights-section {
    flex-direction: row;
    gap: 64px;
    padding: 80px 80px 0;
}

#tt-hotel-details__highlights-col {
    background-color: var(--Primary-100, #F1F3F5);
    padding: 64px;
    max-width: 745px;
    flex: 1;
}

#tt-hotel-details__highlights-col > div {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#tt-hotel-details__highlights-col h3 {
    color: var(--Primary-900, #0C0F12);
    font-size: 32px;
    font-weight: 350;
    line-height: 125%; /* 40px */
    letter-spacing: 4.8px;
    text-transform: uppercase;
}

.tt-hotel-details__highlights-contact {
    border-top: 1px solid var(--Grey-300, #C9CBCC);
    border-bottom: 1px solid var(--Grey-300, #C9CBCC);
    padding: 24px 0px;
    gap: 16px;
    align-self: stretch;
}

.tt-hotel-details__highlights-list {
    display: grid;
    grid-column-gap: 32px;
    grid-row-gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#tt-hotel-details__highlights-col h4 {
    font-size: 24px;
    font-weight: 400;
    margin: 32px 0 8px;
    text-transform: none;
    font-family: 'Avenir Next - Heavy';
    letter-spacing: 0;
}

.tt-hotel-details__icon-and-text {
    gap: 6px;
    align-items: center;
}

.tt-hotel-details__icon-and-text svg {
    width: 24px;
    height: 24px;
}

.tt-hotel-details__icon-and-text span {
    color: var(--Primary-800, #2D3C46);
}

#tt-hotel-details__seal-col {
    flex: 1;
    align-self: center;
    align-items: center;
    max-width: 451px;
}

/* ########## gallery stylings ########### */

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);    
  overflow-y: auto;
}

.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 64px 24px 24px;
  width: 90%;
  max-width: 1200px;
  border-radius: 8px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* Masonry gallery styles */
#masonry-gallery {
  column-count: 3;
  column-gap: 12px;
  width: 100%;
}

.masonry-img {
  width: 100%;
  display: block;
  margin-bottom: 12px;
  border-radius: 8px;
  object-fit: cover;
  break-inside: avoid;
}


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

    .quote {
        font-size: 24px;
    }

    #tt-hotel-details__highlights-col h3,
    .tt-hotel-details__info--bronze-silver-gold h1, .tt-hotel-details__info--platinum h1 {
        font-size: 28px;
    }

    .tt-hotel-details__info--platinum {
        gap: 64px;
    }

    .tt-hotel-details__manager-section-wrapper > .tt-div {
        gap: 48px;
    }

    #tt-hotel-details__manager-col {
        max-width: 410px;
    }

    .tt-manager-img {
        min-height: 347px;
    }
    
}

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

    .bodycopy-1 {
        font-size: 18px;
    }

    .bodycopy-2 {
        font-size: 16px;
    }

    .quote,
    .tt-hotel-details__quoter-name {
        font-size: 22px;
    }

    .button-md {
        font-size: 18px;
    }

    .tt-hotel-details__hero-section,
    .tt-hotel-details__highlights-section {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .tt-hotel-details__manager-section-wrapper {
        padding: 64px 0 24px;
    }

    .tt-hotel-details__info--platinum > .tt-div:nth-child(1) {
        max-width: none;
    }

    .tt-map-wrapper {
        max-width: none;
    }

    .tt-hotel-details__info--platinum {
        flex-direction: column;
    }

    /* Adjust grid template for smaller screens while maintaining ratio */
    .tt-platinum-img-grid.tt-img-wrapper {
        grid-template-columns: 648fr 320fr; /* Keep the same ratio */
    }

    /* Hide the third image on tablets, keep only 2 images */
    .tt-platinum-img-grid > .tt-img-wrapper--platinum-sm .tt-img:nth-child(3) {
        display: none;
    }

    /* Adjust height calculation for 2 images instead of 3 */
    .tt-platinum-img-grid > .tt-img-wrapper--platinum-sm .tt-img {
        height: calc((100% - 12px) / 2); /* Divide height equally for 2 images with 1 × 12px gap */
    }

    .tt-hero-wrapper--bronze-silver-gold {
        gap: 32px;
    }

    .tt-hero-wrapper--bronze-silver-gold {
        flex-direction: column;
    }

    .tt-hero-wrapper--bronze-silver-gold  > .tt-div:nth-child(2) {
        max-width: none;
    }

    /* Hide other images in bronze-silver-gold template for < 1024px */
    .tt-hide-img-on-small-screens {
        display: none;
    }

    .tt-hero-wrapper--bronze-silver-gold  > .tt-div:nth-child(1) {
        max-width: none;
    }

    .tt-hotel-details__info--bronze-silver-gold #map-container {
        margin-top: 64px;
    }

    .tt-hotel-details__manager-section-wrapper > .tt-div {
        gap: 0px;
        flex-direction: column;
    }

    #tt-hotel-details__manager-col > div {
        width: 100%;
    }

    #tt-hotel-details__manager-col {
        max-width: none;
        padding: 40px 80px 0;
        border: none;
    }

    .tt-manager-img {
        aspect-ratio: 1 / 1;
        max-width: 300px;
        min-height: unset;
    }

    #tt-hotel-details__quote-col {
        align-self: center;
        padding: 40px 80px;
    }

    .tt-hotel-details__manager-section-wrapper > .tt-div::after {
        content: none;
    }

    .tt-hotel-details__quoter-role {
        font-size: 16px;
    }

    .tt-hotel-details__highlights-section {
        flex-direction: column-reverse;
    }

    #tt-hotel-details__highlights-col {
        padding: 48px;
        max-width: none;
    }

    .tt-hotel-details__seal {
        width: 100%;
        max-width: 400px;
    }
    
}

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

    .tt-hotel-detail__cta a span {
        font-size: 18px;
    }

    .quote,
    .tt-hotel-details__quoter-name {
        font-size: 20px;
    }

    .tt-hotel-details__hero-section,
    .tt-hotel-details__highlights-section {
        padding-left: 4%;
        padding-right: 4%;
    }

    .tt-hotel-details__manager-section-wrapper {
        padding: 48px 0 32px;
    }

    .tt-hero-wrapper--bronze-silver-gold {
        gap: 16px;
    }

    #tt-hotel-details__highlights-col h3,
    .tt-hotel-details__info--bronze-silver-gold h1, .tt-hotel-details__info--platinum h1 {
        font-size: clamp(24px,7vw,28px) !important;
    }

    .tt-hotel-details__manager-section-wrapper > .tt-div {
        gap: 40px;
    }
    
    #tt-hotel-details__manager-col {
        padding-bottom: 0px;
    }

    .tt-hotel-details__hotelname-display span {
        left: 20px;
    }

    #tt-hotel-details__quote-col {
        padding-top: 0px;
        padding-bottom: 0px;
    }


    .tt-hotel-details__quoter-role {
        font-size: 14px;
    }

    .tt-hotel-details__info--platinum {
        gap: 40px;
    }
    
    #tt-hotel-details__manager-col {
        padding: 40px 40px 0;
    }
    
    #tt-hotel-details__quote-col {
        align-self: center;
        padding: 0 40px;
    }

    #tt-hotel-details__highlights-col {
        padding: 32px;
    }

    /* Stack image columns vertically on very small screens */
    .tt-platinum-img-grid.tt-img-wrapper {
        grid-template-columns: 1fr; /* Single column layout - only show large image */
        grid-template-rows: auto; /* Single row */
    }

    /* Hide the entire small images column on mobile */
    .tt-platinum-img-grid > .tt-img-wrapper--platinum-sm {
        display: none;
    }

    /* Remove aspect ratio constraint on mobile for better fit */
    .tt-platinum-img-grid > .tt-img-wrapper--platinum-lg {
        aspect-ratio: 948 / 663; /* Maintain large image aspect ratio */
    }

    /* Move gallery button outside of image on mobile */
    .tt-hotel-details__gallery-button {
        position: static; /* Remove absolute positioning */
        align-self: flex-end; 
        padding: 4px 8px;
    }

    .tt-hotel-details__gallery-button svg {
        width: 20px;
        height: 20px;
    }

    .button-md {
        font-size: 15px;
    }

}

@media only screen and (max-device-width: 640px) {
    #tt-hotel-details__highlights-col h3,
    .tt-hotel-details__info--bronze-silver-gold h1, .tt-hotel-details__info--platinum h1 {
        font-size: clamp(20px,5vw,26px) !important;
    }

    .tt-hotel-details__quoter::after {
        width: 100%;
    }

}


/* Responsive: 1 column on mobile, 2 on tablet */
@media (max-width: 900px) {
  #masonry-gallery {
    column-count: 2;
  }
}
@media (max-width: 600px) {
  #masonry-gallery {
    column-count: 1;
  }
}

/* ########## END Hotel Details styling ########### */