/*----------------------------------------------------------------------------------------------------------------------------
ACCOMMODATION CARDS - A TRIP PAGE'S ACCOMMODATION: THE ITINERARY'S LIST AND THE ACCOMMODATION POP-UP (CANTERBURY COLOURS)
2026-10-08 MMC - TASK 20261008-1511-accommodation-cards-pages. LOADED BY lapland-holiday.php WITH /js/accommodation-cards.js WHEN THE TRIP HAS
ACCOMMODATION. EVERY RULE HANGS OFF .acc-list (THE ITINERARY'S "YOUR CHOICE OF ACCOMMODATION", f_acc_list_html()) OR .acc-card-modal (THE
POP-UP - A jQuery FlexModal ITEM, SO style.css / modal.css GIVE IT ITS DIMMED BACKGROUND), SO NOTHING ELSE ON THE SITE CHANGES.
THE LIST: PHONE FIRST - A RESORT CARD PER ROW (PHOTO LEFT); FROM 720px THE CARDS SIT SIDE BY SIDE (PHOTO ON TOP) AND THE OPEN RESORT'S LIST
FILLS THE ROW UNDER ITS CARD (grid-auto-flow: dense).
THE POP-UP: UNDER 960px A SHEET FROM THE BOTTOM THAT SCROLLS AS ONE, THE BUTTONS FIXED UNDER IT; FROM 960px A DIALOG, THE GALLERY ON THE
LEFT (WITH THUMBNAILS), THE TEXT ON THE RIGHT SCROLLING ON ITS OWN, THE BUTTONS UNDER IT.
THE GLOBAL button RULE IN style.css PAINTS EVERY BUTTON GREEN AND UPPERCASE AND TURNS IT ORANGE ON :hover / :focus (0,1,1) - EVERY BUTTON
HERE IS RESET AT (0,2,0) OR MORE.
NO prefers-reduced-motion RULES: MARTIN'S CHOICE FOR HIS SITES' ANIMATION (THE MOTION HERE IS A SHORT SLIDE AND FADES).
THE SAME RULES ON CANTERBURY AND SANTA CLAUS TRIPS - ONLY THE COLOURS IN THE FIRST RULE DIFFER (MADE FROM ONE TEMPLATE). SERVED WITH THE
SITE'S VERSION STAMP (/css/accommodation-cards.<stamp>.css) - A LATER EDIT NEEDS A STAMP BUMP.
----------------------------------------------------------------------------------------------------------------------------*/

/*THE SITE'S COLOURS: THE ACCENT (LINKS, TICKS, CHEVRONS, THE EYEBROW, FOCUS RINGS - AT LEAST 4.5:1 ON WHITE), A PALE TINT OF IT (THE OPEN
  RESORT CARD), THE BUTTON AND ITS HOVER (THE SITE'S OWN "SHOW DATES & AVAILABILITY" COLOURS) AND THE TEXT*/
.acc-list, .acc-card-modal {--acc-accent: #007367; --acc-tint: #eef6f5; --acc-cta: #8A1538; --acc-cta-hover: #C9B27C; --acc-text: #343f48; --acc-muted: #5b6670; --acc-line: #dde2e5;}


/*---- THE ITINERARY'S LIST ------------------------------------------------------------------------------------------------*/

.acc-list {margin: 12px 0px 0px 0px; color: var(--acc-text); font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 1.5;}
.acc-list svg {fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;}
.acc-list .acc-list__intro {margin: 0px 0px 12px 0px; padding: 0px; font-size: 15px; line-height: 1.5;}

/*THE RESORT CARDS - ONE PER ROW ON A PHONE*/
.acc-list .acc-list__resorts {display: grid; grid-template-columns: minmax(0px, 1fr); grid-auto-flow: dense; gap: 10px;}
.acc-list .acc-resort {min-width: 0px;}
.acc-list .acc-resort__toggle {position: relative; display: flex; align-items: stretch; box-sizing: border-box; width: 100%; min-height: 80px; margin: 0px; padding: 0px; overflow: hidden; border: solid 2px var(--acc-line); border-radius: 0px; background: #ffffff; color: var(--acc-text); font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.4; text-align: left; text-transform: none; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;}
.acc-list .acc-resort__toggle:hover, .acc-list .acc-resort__toggle:focus {border: solid 2px var(--acc-accent); background: #ffffff; color: var(--acc-text);}
.acc-list .acc-resort__toggle[aria-expanded="true"] {border-color: var(--acc-accent); background: var(--acc-tint);}
.acc-list .acc-resort__toggle:focus-visible {outline: solid 2px var(--acc-accent); outline-offset: 2px;}
.acc-list .acc-resort__photo {flex: 0 0 104px; display: block; min-height: 80px; background-color: #e3e8ea; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.acc-list .acc-resort__text {flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0px; padding: 8px 40px 8px 12px;}
.acc-list .acc-resort__name {font-size: 16px; font-weight: 700; line-height: 1.3;}
.acc-list .acc-resort__count, .acc-list .acc-resort__from {font-size: 13px; line-height: 1.4;}
.acc-list .acc-resort__toggle svg {position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--acc-accent); transition: transform .25s ease;}
.acc-list .acc-resort__toggle[aria-expanded="true"] svg {transform: rotate(180deg);}

/*A RESORT'S LIST - IT FILLS THE ROW UNDER ITS CARD. THE SCRIPT SHOWS ONLY THE OPEN ONE (WITHOUT IT EVERY LIST STAYS OPEN)*/
.acc-list .acc-resort__panel {grid-column: 1 / -1; border: solid 1px var(--acc-line); border-top: solid 3px var(--acc-accent); background-color: #ffffff;}
.acc-list.acc-list--js .acc-resort__panel {display: none;}
.acc-list.acc-list--js .acc-resort__panel.is-open {display: block;}
.acc-list .acc-resort__head {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0px; padding: 10px 16px; background-color: #f3f6f6; font-size: 15px; line-height: 1.4;}
.acc-list .acc-resort__about {display: none; min-height: 32px; margin: 0px; padding: 4px 0px; border: 0px; border-radius: 0px; background: none; background-color: transparent; color: var(--acc-accent); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: underline; text-transform: none; cursor: pointer;}
.acc-list.acc-list--js .acc-resort__about {display: inline-block;}
.acc-list .acc-resort__about:hover, .acc-list .acc-resort__about:focus {border: 0px; background: none; background-color: transparent; color: var(--acc-accent); text-decoration: none;}

/*THE PLACES TO STAY - EACH ROW A LINK THAT OPENS THE POP-UP. A LONG LIST SHOWS 6 UNTIL "SHOW ALL"*/
.acc-list .acc-rows {margin: 0px; padding: 0px; list-style: none;}
.acc-list.acc-list--list .acc-rows {border: solid 1px var(--acc-line); border-top: solid 3px var(--acc-accent);}
.acc-list .acc-row {display: block; margin: 0px; padding: 0px; border-top: solid 1px var(--acc-line); background: none; list-style: none;}
.acc-list .acc-row:first-child {border-top: 0px;}
.acc-list .acc-row::before {content: none;}
.acc-list.acc-list--js .acc-row--more {display: none;}
.acc-list.acc-list--js .acc-rows.is-all .acc-row--more {display: block;}
.acc-list .acc-row__link {display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 52px; padding: 6px 16px; color: var(--acc-text); text-decoration: none; transition: background-color .15s ease;}
.acc-list .acc-row__link:hover {background-color: #f6f8f8; color: var(--acc-text); text-decoration: none;}
.acc-list .acc-row__link:hover .acc-row__name {color: var(--acc-accent);}
.acc-list .acc-row__link:focus-visible {outline: solid 2px var(--acc-accent); outline-offset: -2px;}
.acc-list .acc-row__text {flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0px;}
.acc-list .acc-row__name {font-size: 15px; font-weight: 600; line-height: 1.35;}
.acc-list .acc-row__type {font-size: 12px; line-height: 1.4; color: var(--acc-muted);}
.acc-list .acc-row__price {flex: none; font-size: 13px; line-height: 1.4; white-space: nowrap;}
.acc-list .acc-row__price strong {font-weight: 700;}
.acc-list .acc-row__link svg {flex: none; width: 16px; height: 16px; color: var(--acc-accent);}

/*"SHOW ALL 15" / "SHOW FEWER"*/
.acc-list .acc-rows__toggle {display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0px; padding: 0px 16px; border: 0px; border-top: solid 1px var(--acc-line); border-radius: 0px; background: none; background-color: transparent; color: var(--acc-accent); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: left; text-transform: none; cursor: pointer;}
.acc-list .acc-rows__toggle:hover, .acc-list .acc-rows__toggle:focus {border: 0px; border-top: solid 1px var(--acc-line); background: none; background-color: #f6f8f8; color: var(--acc-accent);}
.acc-list.acc-list--list .acc-rows__toggle {border: solid 1px var(--acc-line); border-top: 0px;}

/*FROM 720px: THE RESORT CARDS SIDE BY SIDE, PHOTO ON TOP*/
@media only screen and (min-width: 720px) {
.acc-list .acc-list__resorts {grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;}
.acc-list .acc-resort__toggle {flex-direction: column; height: 100%;}
.acc-list .acc-resort__photo {flex: 0 0 112px; width: 100%; min-height: 112px;}
.acc-list .acc-resort__text {justify-content: flex-start; padding: 10px 40px 12px 12px;}
.acc-list .acc-resort__toggle svg {top: auto; bottom: 14px; margin-top: 0px;}
}


/*---- THE POP-UP - PHONE FIRST --------------------------------------------------------------------------------------------*/

/*THE FlexModal ITEM (THE DIMMED PAGE) HOLDS THE PANEL AT THE BOTTOM; THE PANEL STOPS 16px SHORT OF THE TOP SO THE PAGE STILL SHOWS BEHIND IT.
  A TAP ON THAT STRIP CLOSES IT (FlexModal)*/
.flex-modal-item.acc-card-modal {align-items: flex-end; background-color: rgba(20, 26, 31, 0.62);}
.acc-card-modal .flex-modal-item__content {box-sizing: border-box; width: 100%; max-width: 640px; height: calc(100% - 16px); max-height: none; padding: 0px; border-radius: 0px; box-shadow: none; background: transparent;}

/*IT SLIDES UP A LITTLE AS IT FADES IN (modal.css's .modal-animate SLIDES DOWN FROM ABOVE)*/
.acc-card-modal.modal-animate .flex-modal-item__content {transform: translateY(40px);}
.acc-card-modal.modal-animate.flex-modal-item--visible .flex-modal-item__content {transform: translateY(0px);}

.acc-card-modal .acc-card-modal__panel {position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; background-color: #ffffff; color: var(--acc-text); font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.5; text-align: left; box-shadow: 0px 24px 60px rgba(0, 0, 0, 0.35);}

/*EVERYTHING BUT THE BUTTONS SCROLLS TOGETHER (WITHOUT SCROLLING THE PAGE BEHIND WHEN IT REACHES THE END)*/
.acc-card-modal .acc-card-modal__body {flex: 1 1 auto; min-height: 0px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;}

/*THE LINE ICONS*/
.acc-card-modal svg {fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;}

/*KEYBOARD FOCUS*/
.acc-card-modal a:focus-visible, .acc-card-modal button:focus-visible {outline: solid 2px var(--acc-accent); outline-offset: 2px;}

/*THE X - OVER THE PHOTO ON A PHONE, OVER THE TEXT COLUMN ON A DESKTOP. modal.css SIZES .flex-modal-item__close 20px AT 20px IN*/
.acc-card-modal .acc-card-modal__close {position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; background: #ffffff; color: var(--acc-text); cursor: pointer;}
.acc-card-modal .acc-card-modal__close:hover, .acc-card-modal .acc-card-modal__close:focus {border: 0px; background: #ffffff; color: var(--acc-accent);}
.acc-card-modal .acc-card-modal__close svg {width: 20px; height: 20px;}


/*---- THE GALLERY ---------------------------------------------------------------------------------------------------------*/

/*A ROW OF PHOTOS THAT SCROLLS SIDEWAYS AND SNAPS TO EACH ONE (SWIPE ON A PHONE). THE SCRIPT LOADS A PHOTO WHEN IT IS SHOWING OR NEXT TO IT;
  EACH FADES IN OVER THE GREY (THE FIRST ONE OVER THE LINK'S OWN PHOTO)*/
.acc-card-modal .acc-card-modal__gallery {position: relative; background-color: #e3e8ea;}
.acc-card-modal .acc-card-gallery {position: relative;}
.acc-card-modal .acc-card-gallery__track {display: flex; height: 66vw; max-height: 420px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; outline: none;}
.acc-card-modal .acc-card-gallery__track::-webkit-scrollbar {display: none;}
.acc-card-modal .acc-card-gallery__track:focus-visible {outline: solid 3px var(--acc-accent); outline-offset: -3px;}
.acc-card-modal .acc-card-gallery__slide {position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background-color: #d5dadd; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.acc-card-modal .acc-card-gallery__slide img {display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease;}
.acc-card-modal .acc-card-gallery__slide img.is-loaded {opacity: 1;}

/*PREVIOUS / NEXT*/
.acc-card-modal .acc-card-gallery__prev, .acc-card-modal .acc-card-gallery__next {position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; margin: -22px 0px 0px 0px; padding: 0px; border: 0px; border-radius: 0px; background: rgba(255, 255, 255, 0.9); color: var(--acc-text); cursor: pointer;}
.acc-card-modal .acc-card-gallery__prev {left: 8px;}
.acc-card-modal .acc-card-gallery__next {right: 8px;}
.acc-card-modal .acc-card-gallery__prev:hover, .acc-card-modal .acc-card-gallery__prev:focus, .acc-card-modal .acc-card-gallery__next:hover, .acc-card-modal .acc-card-gallery__next:focus {border: 0px; background: #ffffff; color: var(--acc-accent);}
.acc-card-modal .acc-card-gallery__prev svg, .acc-card-modal .acc-card-gallery__next svg {width: 20px; height: 20px; stroke-width: 2.4;}

/*"3 / 8"*/
.acc-card-modal .acc-card-gallery__count {position: absolute; left: 12px; bottom: 12px; z-index: 1; margin: 0px; padding: 4px 10px; background-color: rgba(0, 0, 0, 0.62); color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1.4;}

/*THUMBNAILS - DESKTOP ONLY (BELOW)*/
.acc-card-modal .acc-card-gallery__thumbs {display: none;}


/*---- THE TEXT ------------------------------------------------------------------------------------------------------------*/

.acc-card-modal .acc-card-modal__main {padding: 20px 20px 24px 20px;}
/*NO PHOTO AT ALL: KEEP THE TITLE CLEAR OF THE X*/
.acc-card-modal .acc-card-modal__gallery:empty + .acc-card-modal__main {padding-top: 60px;}

/*"LOG CABIN IN LUOSTO" - THE RESORT OPENS ITS MODAL*/
.acc-card-modal .acc-card-modal__eyebrow {margin: 0px 0px 6px 0px; padding: 0px; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-accent);}
.acc-card-modal .acc-card-modal__resort {display: inline; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; background: none; background-color: transparent; color: var(--acc-accent); font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-decoration: underline; text-transform: inherit; cursor: pointer;}
.acc-card-modal .acc-card-modal__resort:hover, .acc-card-modal .acc-card-modal__resort:focus {border: 0px; background: none; background-color: transparent; color: var(--acc-accent); text-decoration: none;}
.acc-card-modal .acc-card-modal__title {margin: 0px 0px 6px 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: normal; text-align: left; text-transform: none; color: var(--acc-text);}
/*THE X STAYS IN THE TOP RIGHT CORNER AS THE TEXT SCROLLS - THE EYEBROW AND TITLE KEEP CLEAR OF IT*/
.acc-card-modal .acc-card-modal__eyebrow, .acc-card-modal .acc-card-modal__title {padding-right: 44px;}
.acc-card-modal .acc-card-modal__price {margin: 0px 0px 14px 0px; padding: 0px; font-size: 14px; line-height: 1.5; color: var(--acc-text);}
.acc-card-modal .acc-card-modal__price strong {font-size: 18px; font-weight: 700;}

.acc-card-modal .acc-card-details p {margin: 0px 0px 12px 0px; font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--acc-text);}
.acc-card-modal .acc-card-details a {color: var(--acc-accent); font-weight: 600; text-decoration: underline;}
.acc-card-modal .acc-card-intro p {font-weight: 600;}
.acc-card-modal .acc-card-details h4 {margin: 14px 0px 6px 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: normal; text-transform: none; color: var(--acc-text);}

/*"WHAT WE LOVE" (SANTA CLAUS TRIPS) AND THE FACILITIES LISTS*/
.acc-card-modal .acc-card-love {margin: 4px 0px 16px 0px; padding: 14px 16px; background-color: var(--acc-tint);}
.acc-card-modal .acc-card-section__title {margin: 0px 0px 8px 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: normal; text-transform: none; color: var(--acc-text);}
.acc-card-modal .acc-card-list, .acc-card-modal .acc-card-facilities__list {margin: 0px; padding: 0px; list-style: none;}
.acc-card-modal .acc-card-list li, .acc-card-modal .acc-card-facilities__list li {display: flex; gap: 10px; margin: 0px 0px 8px 0px; padding: 0px; font-size: 14px; line-height: 1.45; list-style: none; background: none;}
.acc-card-modal .acc-card-list li::before, .acc-card-modal .acc-card-facilities__list li::before {content: none;}
.acc-card-modal .acc-card-list li:last-child, .acc-card-modal .acc-card-facilities__list li:last-child {margin-bottom: 0px;}
.acc-card-modal .acc-card-list svg, .acc-card-modal .acc-card-facilities__list svg {flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--acc-accent); stroke-width: 2.6;}
.acc-card-modal .acc-card-facilities__list img {flex: none; width: 16px; height: 16px; margin-top: 2px;}
.acc-card-modal .acc-card-list__note {color: var(--acc-muted);}

/*A SECTION THAT OPENS AND CLOSES ("MORE ABOUT THIS ACCOMMODATION", "FACILITIES")*/
.acc-card-modal .acc-card-fold {margin: 0px; border-top: solid 1px #e6e8ea;}
.acc-card-modal .acc-card-fold:last-child {border-bottom: solid 1px #e6e8ea;}
.acc-card-modal .acc-card-fold__title {margin: 0px; padding: 0px; font-size: 15px; font-weight: 700; line-height: 1.4; text-transform: none;}
.acc-card-modal .acc-card-fold__toggle {display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; background: none; background-color: transparent; color: var(--acc-text); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: left; text-transform: none; cursor: pointer;}
.acc-card-modal .acc-card-fold__toggle:hover, .acc-card-modal .acc-card-fold__toggle:focus {border: 0px; background: none; background-color: transparent; color: var(--acc-text);}
.acc-card-modal .acc-card-fold__toggle svg {flex: none; width: 18px; height: 18px; color: var(--acc-accent); stroke-width: 2.4; transition: transform .25s ease;}
.acc-card-modal .acc-card-fold__toggle[aria-expanded="true"] svg {transform: rotate(180deg);}
.acc-card-modal .acc-card-fold__body {padding: 0px 0px 16px 0px;}
.acc-card-modal .acc-card-fold__body[hidden] {display: none;}
.acc-card-modal .acc-card-fold__body h4:first-child {margin-top: 0px;}

/*WHILE THE DETAILS LOAD: GREY LINES WHERE THE TEXT WILL BE*/
.acc-card-modal .acc-card-skeleton span {display: block; height: 14px; margin: 0px 0px 10px 0px; background-color: #e9ecee;}
.acc-card-modal .acc-card-skeleton span:nth-child(1) {width: 100%;}
.acc-card-modal .acc-card-skeleton span:nth-child(2) {width: 96%;}
.acc-card-modal .acc-card-skeleton span:nth-child(3) {width: 98%;}
.acc-card-modal .acc-card-skeleton span:nth-child(4) {width: 92%;}
.acc-card-modal .acc-card-skeleton span:nth-child(5) {width: 97%;}
.acc-card-modal .acc-card-skeleton span:nth-child(6) {width: 55%;}


/*---- THE BUTTONS ---------------------------------------------------------------------------------------------------------*/

/*ALWAYS IN VIEW UNDER THE TEXT (AND CLEAR OF AN iPHONE'S HOME BAR)*/
.acc-card-modal .acc-card-modal__footer {flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: solid 1px #e6e8ea; background-color: #ffffff;}

/*"SHOW DATES & PRICES" - THE SITE'S OWN "SHOW DATES & AVAILABILITY" BUTTON: ITS COLOUR, UPPERCASE TEXT AND A DARKER ARROW BLOCK*/
.acc-card-modal .acc-card-modal__primary {display: flex; align-items: stretch; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; background: var(--acc-cta); background-color: var(--acc-cta); color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0.02em; text-align: left; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background-color .3s ease;}
.acc-card-modal .acc-card-modal__primary:hover, .acc-card-modal .acc-card-modal__primary:focus {border: 0px; background: var(--acc-cta-hover); background-color: var(--acc-cta-hover); color: #ffffff;}
.acc-card-modal .acc-card-modal__primary-text {flex: 1 1 auto; display: flex; align-items: center; padding: 12px 16px;}
.acc-card-modal .acc-card-modal__primary-icon {flex: none; display: flex; align-items: center; padding: 0px 16px; background-color: rgba(0, 0, 0, 0.08);}
.acc-card-modal .acc-card-modal__primary svg {width: 16px; height: 16px; stroke-width: 2.6;}

/*UNDER IT, ONE ROW: "< BACK TO ..." ON THE LEFT (PHONES ONLY - THE SHEET FILLS THE SCREEN, SO A WAY OUT WHERE THE THUMB IS) AND "VIEW FULL
  ACCOMMODATION DETAILS" ON THE RIGHT (CENTRED ON ITS OWN ON A DESKTOP)*/
.acc-card-modal .acc-card-modal__links {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0px 8px;}
.acc-card-modal .acc-card-modal__back {display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 44px; margin: 0px; padding: 8px 2px 8px 0px; border: 0px; border-radius: 0px; background: none; background-color: transparent; color: var(--acc-text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; text-transform: none; cursor: pointer;}
.acc-card-modal .acc-card-modal__back:hover, .acc-card-modal .acc-card-modal__back:focus {border: 0px; background: none; background-color: transparent; color: var(--acc-accent);}
.acc-card-modal .acc-card-modal__back svg {flex: none; width: 16px; height: 16px; stroke-width: 2.4;}
.acc-card-modal .acc-card-modal__page {display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 8px 0px 8px 2px; color: var(--acc-accent); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: right; text-decoration: underline;}
.acc-card-modal .acc-card-modal__page:hover, .acc-card-modal .acc-card-modal__page:focus {color: var(--acc-accent); text-decoration: none;}
/*ON A PHONE "FULL DETAILS", SO IT FITS BESIDE "< BACK TO ..." (EVEN ON A 320px PHONE); THE FULL WORDING FROM 480px*/
.acc-card-modal .acc-card-modal__page-full {display: none;}
@media only screen and (min-width: 480px) {
.acc-card-modal .acc-card-modal__page-full {display: inline;}
.acc-card-modal .acc-card-modal__page-short {display: none;}
}


/*---- DESKTOP: A DIALOG, GALLERY LEFT, TEXT RIGHT -------------------------------------------------------------------------*/
@media only screen and (min-width: 960px) {
.flex-modal-item.acc-card-modal {align-items: center;}
.acc-card-modal .flex-modal-item__content {width: 92vw; max-width: 1000px; height: 90vh; max-height: 680px;}
.acc-card-modal.modal-animate .flex-modal-item__content {transform: translateY(24px);}

/*THE BODY'S TWO PARTS BECOME GRID CELLS OF THE PANEL (display: contents), SO THE BUTTONS SIT UNDER THE TEXT COLUMN ONLY*/
.acc-card-modal .acc-card-modal__panel {display: grid; grid-template-columns: minmax(0px, 11fr) minmax(0px, 9fr); grid-template-rows: minmax(0px, 1fr) auto; grid-template-areas: "gallery main" "gallery footer";}
.acc-card-modal .acc-card-modal__body {display: contents;}
.acc-card-modal .acc-card-modal__gallery {grid-area: gallery; display: flex; flex-direction: column; min-height: 0px; background-color: #f4f5f6;}
.acc-card-modal .acc-card-gallery {display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0px;}
.acc-card-modal .acc-card-gallery__track {flex: 1 1 auto; height: auto; max-height: none; min-height: 0px;}

/*THUMBNAILS UNDER THE PHOTO (THE ARROWS AND COUNT MOVE UP BY THEIR STRIP'S 72px)*/
.acc-card-modal .acc-card-gallery__thumbs {display: flex; flex: none; gap: 8px; padding: 12px; overflow-x: auto; scrollbar-width: thin;}
.acc-card-modal .acc-card-gallery__thumb {flex: none; box-sizing: border-box; width: 64px; height: 48px; margin: 0px; padding: 0px; overflow: hidden; border: solid 3px transparent; border-radius: 0px; background: #d5dadd; cursor: pointer;}
.acc-card-modal .acc-card-gallery__thumb:hover, .acc-card-modal .acc-card-gallery__thumb:focus {border: solid 3px #b8c0c5; background: #d5dadd;}
.acc-card-modal .acc-card-gallery__thumb[aria-current="true"] {border-color: var(--acc-accent);}
.acc-card-modal .acc-card-gallery__thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}
.acc-card-modal .acc-card-gallery__prev, .acc-card-modal .acc-card-gallery__next {top: calc(50% - 36px);}
.acc-card-modal .acc-card-gallery__count {bottom: 84px;}
/*ONE PHOTO, OR ONLY THE LINK'S PHOTO WHILE THE GALLERY LOADS: NO THUMBNAIL STRIP, SO THE COUNT SITS AT THE BOTTOM*/
.acc-card-modal .acc-card-gallery--placeholder .acc-card-gallery__track {flex: 1 1 auto;}

.acc-card-modal .acc-card-modal__main {grid-area: main; min-height: 0px; overflow-y: auto; padding: 48px 32px 24px 32px;}
.acc-card-modal .acc-card-modal__gallery:empty + .acc-card-modal__main {padding-top: 48px;}
.acc-card-modal .acc-card-modal__title {font-size: 26px;}
.acc-card-modal .acc-card-modal__footer {grid-area: footer; padding: 16px 32px 20px 32px;}

/*NO BACK LINK ON A DESKTOP (THE X, ESC AND THE DIMMED PAGE CLOSE IT); THE PAGE LINK CENTRED*/
.acc-card-modal .acc-card-modal__links {justify-content: center;}
.acc-card-modal .acc-card-modal__back {display: none;}
.acc-card-modal .acc-card-modal__page {text-align: center;}
}