/* Migrated from yachts/templates/yachts/yacht_page.html */

/* Migrated Yacht block 1 */
/* SYG YACHT SECTION TITLE STYLING V3 */
.syg-yacht-single-column .syg-section-title,
.syg-yacht-single-column > section > h2:first-of-type,
.syg-yacht-single-column > aside > h2:first-of-type,
#where-can-my-yacht-go > h2:first-of-type,
#similar-yachts > h2:first-of-type,
#accounts-financial-intelligence h2.h5 {
    position: relative;
    margin-top: 0;
    margin-bottom: 1.3rem;
    padding: 0 0 0.75rem 0.95rem;
    border-bottom: 1px solid rgba(26, 53, 72, 0.14);
    color: #183447;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.006em;
}

.syg-yacht-single-column .syg-section-title::before,
.syg-yacht-single-column > section > h2:first-of-type::before,
.syg-yacht-single-column > aside > h2:first-of-type::before,
#where-can-my-yacht-go > h2:first-of-type::before,
#similar-yachts > h2:first-of-type::before,
#accounts-financial-intelligence h2.h5::before {
    position: absolute;
    top: 0.08em;
    bottom: 0.68rem;
    left: 0;
    width: 0.2rem;
    border-radius: 999px;
    background: rgba(43, 93, 119, 0.38);
    content: "";
}

#accounts-financial-intelligence.syg-finance-pastel-panel {
    padding: clamp(1.25rem, 2.5vw, 2rem) !important;
    border: 1px solid rgba(72, 124, 113, 0.16) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(
            180deg,
            rgba(239, 248, 246, 0.78) 0%,
            rgba(248, 251, 250, 0.72) 100%
        ) !important;
}

#accounts-financial-intelligence.syg-finance-pastel-panel
.syg-finance__summary article,
#accounts-financial-intelligence.syg-finance-pastel-panel
.syg-finance__details {
    border-color: rgba(72, 124, 113, 0.13);
}

@media (max-width: 575px) {
    .syg-yacht-single-column .syg-section-title,
    .syg-yacht-single-column > section > h2:first-of-type,
    .syg-yacht-single-column > aside > h2:first-of-type,
    #where-can-my-yacht-go > h2:first-of-type,
    #similar-yachts > h2:first-of-type,
    #accounts-financial-intelligence h2.h5 {
        padding-left: 0.78rem;
    }

    #accounts-financial-intelligence.syg-finance-pastel-panel {
        padding: 1rem !important;
    }
}

/* SYG YACHT ACTION CTA V2 */
.syg-yacht-action-section .syg-yacht-cta {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 46px;
    margin-top: .4rem;
    padding: .8rem 1.2rem;
    border: 1px solid #173f5f !important;
    border-radius: .45rem;
    background: #173f5f !important;
    color: #ffffff !important;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow:
        0 8px 20px
        rgba(23, 63, 95, .16);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.syg-yacht-action-section
.syg-yacht-cta:not(input)::after {
    content: "\2192";
    flex: 0 0 auto;
    font-size: 1.08em;
    line-height: 1;
    transition: transform .18s ease;
}

.syg-yacht-action-section
.syg-yacht-cta:hover {
    border-color: #0f3048 !important;
    background: #0f3048 !important;
    color: #ffffff !important;
    box-shadow:
        0 10px 24px
        rgba(23, 63, 95, .22);
    transform: translateY(-1px);
}

.syg-yacht-action-section
.syg-yacht-cta:not(input):hover::after {
    transform: translateX(3px);
}

.syg-yacht-action-section
.syg-yacht-cta:focus-visible {
    outline:
        3px solid
        rgba(23, 63, 95, .28);
    outline-offset: 3px;
}

.syg-yacht-action-section
.syg-yacht-cta:active {
    box-shadow:
        0 4px 12px
        rgba(23, 63, 95, .16);
    transform: translateY(0);
}

.syg-yacht-action-section
.syg-yacht-cta[disabled],
.syg-yacht-action-section
.syg-yacht-cta.disabled,
.syg-yacht-action-section
.syg-yacht-cta[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .58;
    box-shadow: none;
    transform: none;
}

@media (max-width: 575.98px) {
    .syg-yacht-action-section
    .syg-yacht-cta {
        width: 100%;
    }
}

/* SYG ALL YACHT BUTTON BACKGROUNDS V1 */
.syg-yacht-single-column .syg-yacht-button {
    background-color: #173f5f !important;
    border-color: #173f5f !important;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow:
        0 6px 16px
        rgba(23, 63, 95, .14);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.syg-yacht-single-column
.syg-yacht-button:hover {
    background-color: #0f3048 !important;
    border-color: #0f3048 !important;
    color: #ffffff !important;
    box-shadow:
        0 8px 20px
        rgba(23, 63, 95, .22);
    transform: translateY(-1px);
}

.syg-yacht-single-column
.syg-yacht-button:focus-visible {
    outline:
        3px solid
        rgba(23, 63, 95, .28);
    outline-offset: 3px;
}

.syg-yacht-single-column
.syg-yacht-button:active {
    background-color: #0b263a !important;
    border-color: #0b263a !important;
    color: #ffffff !important;
    box-shadow:
        0 3px 10px
        rgba(23, 63, 95, .16);
    transform: translateY(0);
}

.syg-yacht-single-column
.syg-yacht-button:disabled,
.syg-yacht-single-column
.syg-yacht-button[disabled],
.syg-yacht-single-column
.syg-yacht-button.disabled,
.syg-yacht-single-column
.syg-yacht-button[aria-disabled="true"] {
    background-color: #6f8291 !important;
    border-color: #6f8291 !important;
    color: #ffffff !important;
    cursor: not-allowed;
    opacity: .7;
    box-shadow: none;
    transform: none;
}

.syg-yacht-single-column
a.syg-yacht-button:visited {
    color: #ffffff !important;
}

/* Migrated Yacht block 2 */
/*
     * Yacht detail sidebar must scroll normally.
     * Key Facts must not remain pinned over later sidebar content.
     */
    .syg-sidebar-card,
    .syg-sidebar-card.sticky-top,
    .syg-sidebar-card .sticky-top,
    .syg-sidebar-card[style*="position: sticky"],
    .syg-sidebar-card[style*="position:sticky"],
    .syg-sidebar-card [style*="position: sticky"],
    .syg-sidebar-card [style*="position:sticky"],
    #superyacht-passport,
    #similar-yachts,
    #where-can-my-yacht-go {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        inset-block-start: auto !important;
        align-self: auto !important;
    }

/* Migrated Yacht block 3 */
/*
Premium yacht-page directory band.
No font family is changed; all typography inherits from the site.
*/
.syg-yacht-directory {
    --directory-line: var(
        --bs-border-color,
        rgba(17, 24, 39, 0.14)
    );
    --directory-muted: var(
        --bs-secondary-color,
        rgba(17, 24, 39, 0.68)
    );

    width: 100%;
    margin: 0 0 2.75rem;
    padding: 2rem 0 2.15rem;
    border-top: 1px solid var(--directory-line);
    border-bottom: 1px solid var(--directory-line);
}

.syg-yacht-directory__grid {
    display: grid;
    grid-template-columns:
        minmax(12rem, 0.8fr)
        minmax(22rem, 1.35fr)
        minmax(15rem, 1fr);
    align-items: stretch;
}

.syg-yacht-directory__column {
    min-width: 0;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
}

.syg-yacht-directory__column:first-child {
    padding-left: 0;
}

.syg-yacht-directory__column:last-child {
    padding-right: 0;
}

.syg-yacht-directory__column +
.syg-yacht-directory__column {
    border-left: 1px solid var(--directory-line);
}

.syg-yacht-directory__heading {
    margin: 0 0 1.15rem;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.syg-yacht-directory__contents {
    list-style: none;
    margin: 0;
    padding: 0;
}

.syg-yacht-directory__contents li {
    margin: 0;
    padding: 0;
}

.syg-yacht-directory__contents li + li {
    margin-top: 0.48rem;
}

.syg-yacht-directory__contents a {
    display: inline-block;
    text-decoration: none;
    line-height: 1.45;
}

.syg-yacht-directory__contents a:hover,
.syg-yacht-directory__contents a:focus {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.syg-yacht-directory__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 1rem;
    margin: 0;
}

.syg-yacht-directory__fact {
    min-width: 0;
    margin: 0;
}

.syg-yacht-directory__fact dt {
    margin: 0 0 0.2rem;
    color: var(--directory-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.syg-yacht-directory__fact dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.syg-yacht-directory__name-block {
    margin: 0;
}

.syg-yacht-directory__name-block +
.syg-yacht-directory__name-block {
    margin-top: 1.3rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--directory-line);
}

.syg-yacht-directory__name-label {
    display: block;
    margin: 0 0 0.35rem;
    color: var(--directory-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.syg-yacht-directory__name-value {
    margin: 0;
    line-height: 1.55;
}

.syg-yacht-directory__empty {
    margin: 0;
    color: var(--directory-muted);
    line-height: 1.55;
}

.syg-yacht-single-column .syg-section-title,
.syg-yacht-single-column h1,
.syg-yacht-single-column h2,
.syg-yacht-single-column h3,
.syg-yacht-single-column h4 {
    scroll-margin-top: 7rem;
}

@media (max-width: 1050px) {
    .syg-yacht-directory__grid {
        grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1.6fr);
    }

    .syg-yacht-directory__column:nth-child(3) {
        grid-column: 1 / -1;
        margin-top: 1.75rem;
        padding: 1.75rem 0 0;
        border-top: 1px solid var(--directory-line);
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .syg-yacht-directory {
        margin-bottom: 2rem;
        padding: 1.5rem 0;
    }

    .syg-yacht-directory__grid {
        display: block;
    }

    .syg-yacht-directory__column {
        padding: 0;
    }

    .syg-yacht-directory__column +
    .syg-yacht-directory__column {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--directory-line);
        border-left: 0;
    }

    .syg-yacht-directory__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 440px) {
    .syg-yacht-directory__facts {
        grid-template-columns: 1fr;
    }
}

/* Migrated Yacht block 4 */
/* === SYG YACHT GALLERY TRUE 3X2 START === */

.syg-yacht-gallery-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    /* Critical: do not allow old square/fixed-height rules */
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;

    border-radius: inherit;
}

/*
Force common gallery wrappers to size from their content,
rather than imposing an old square aspect ratio.
*/
.syg-yacht-gallery-image-wrapper,
.syg-yacht-gallery-item,
.yacht-gallery-image,
.yacht-gallery-item {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

/* === SYG YACHT GALLERY TRUE 3X2 END === */

/* Migrated Yacht block 5 */
.syg-yacht-gallery-lightbox-trigger {
    display: block;
    width: 100%;
    cursor: zoom-in;
}

.syg-yacht-gallery-lightbox-trigger:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

.syg-yacht-lightbox[hidden] {
    display: none !important;
}

.syg-yacht-lightbox {
    position: fixed;
    inset: 0;

    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.94);

    overflow: hidden;
}

.syg-yacht-lightbox-stage {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 78px 28px 28px;

    overflow: hidden;

    user-select: none;
}

.syg-yacht-lightbox-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 94vw;
    max-height: 84vh;

    object-fit: contain;

    transform:
        translate(0px, 0px)
        scale(1);

    transform-origin: center center;

    cursor: zoom-in;

    transition:
        transform 0.14s ease;

    user-select: none;
    -webkit-user-drag: none;

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.55);
}

.syg-yacht-lightbox-image.is-zoomed {
    cursor: grab;
}

.syg-yacht-lightbox-image.is-dragging {
    cursor: grabbing;
    transition: none;
}

.syg-yacht-lightbox-toolbar {
    position: absolute;

    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 6px;

    border-radius: 10px;

    background: rgba(20, 20, 20, 0.88);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.32);
}

.syg-yacht-lightbox-button {
    appearance: none;

    min-width: 44px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;

    font: inherit;
    font-size: 21px;
    line-height: 1;

    cursor: pointer;
}

.syg-yacht-lightbox-button:hover,
.syg-yacht-lightbox-button:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}

.syg-yacht-lightbox-zoom-level {
    min-width: 66px;

    padding: 0 10px;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
}

.syg-yacht-lightbox-close {
    position: absolute;

    top: 18px;
    right: 20px;

    z-index: 4;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    font-size: 28px;
}

body.syg-yacht-lightbox-open {
    overflow: hidden !important;
}

@media (max-width: 700px) {

    .syg-yacht-lightbox-stage {
        padding:
            76px
            12px
            18px;
    }

    .syg-yacht-lightbox-image {
        max-width: 96vw;
        max-height: 80vh;
    }

    .syg-yacht-lightbox-toolbar {
        top: 14px;
    }

    .syg-yacht-lightbox-close {
        top: 14px;
        right: 12px;
    }

}

/* Migrated Yacht block 6 */
/* SYG YACHT MARINA CARD SECTION */
.syg-yacht-marinas-section {
    width: 100%;
    margin: 0;
    padding: 2.5rem 0;
}

.syg-yacht-marinas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: 1.5rem 0 0;
}

.syg-yacht-marina-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
    background: var(--bs-body-bg, #fff);
}

.syg-yacht-marina-card h3 {
    margin-top: 0;
}

.syg-yacht-marina-card > :last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .syg-yacht-marinas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .syg-yacht-marinas-section {
        padding: 2rem 0;
    }

    .syg-yacht-marinas-grid {
        grid-template-columns: 1fr;
    }
}

/* Migrated Yacht block 7 */
/* SYG SIMILAR YACHTS GRID SECTION */
.syg-similar-yachts-section {
    width: 100%;
    margin: 0;
    padding: 2.5rem 0;
}

.syg-similar-yachts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: 1.5rem 0 0;
}

.syg-similar-yacht-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
    background: var(--bs-body-bg, #fff);
}

.syg-similar-yacht-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.syg-similar-yacht-card > .p-3 {
    flex: 1 1 auto;
}

@media (max-width: 991px) {
    .syg-similar-yachts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .syg-similar-yachts-section {
        padding: 2rem 0;
    }

    .syg-similar-yachts-grid {
        grid-template-columns: 1fr;
    }
}

/* Migrated Yacht block 8 */
/* SYG SHARED YACHT SECTION BACKGROUND */
:root {
    --syg-yacht-section-pastel: #e5eef5;
}

/*
 * Apply the same exact pastel colour to each top-level
 * informational section without altering its existing
 * dimensions, spacing, borders or internal card styling.
 */
.syg-yacht-directory,
.syg-yacht-single-column > section,
.syg-yacht-single-column > aside,
.syg-yacht-single-column > article,
#where-can-my-yacht-go,
#similar-yachts {
    background-color:
        var(--syg-yacht-section-pastel) !important;
}

/*
 * Replace the earlier finance gradient so Accounts uses
 * precisely the same colour as every other section.
 */
#accounts-financial-intelligence.syg-finance-pastel-panel {
    background:
        var(--syg-yacht-section-pastel) !important;
}

/* Migrated Yacht block 9 */
/* SYG CONSISTENT YACHT SECTION BORDERS */
:root {
    --syg-yacht-section-border:
        rgba(45, 82, 111, 0.18);
    --syg-yacht-section-radius: 18px;
}

.syg-yacht-directory,
.syg-yacht-single-column > section,
.syg-yacht-single-column > aside,
.syg-yacht-single-column > article,
#where-can-my-yacht-go,
#similar-yachts,
#accounts-financial-intelligence {
    border:
        1px solid var(--syg-yacht-section-border) !important;
    border-radius:
        var(--syg-yacht-section-radius) !important;
}

/* Migrated Yacht block 10 */
/* SYG STANDARD YACHT SECTION PADDING */
:root {
    --syg-yacht-section-padding:
        clamp(1.25rem, 2.5vw, 2rem);
}

/*
 * Every top-level informational box receives precisely
 * the same internal padding on all four sides.
 */
.syg-yacht-directory,
.syg-yacht-single-column > section,
.syg-yacht-single-column > aside,
.syg-yacht-single-column > article,
#where-can-my-yacht-go,
#similar-yachts,
#accounts-financial-intelligence {
    box-sizing: border-box;
    padding:
        var(--syg-yacht-section-padding) !important;
}

/*
 * Prevent the first or last content element from creating
 * inconsistent additional space against the box edges.
 */
.syg-yacht-directory > :first-child,
.syg-yacht-single-column > section > :first-child,
.syg-yacht-single-column > aside > :first-child,
.syg-yacht-single-column > article > :first-child,
#where-can-my-yacht-go > :first-child,
#similar-yachts > :first-child,
#accounts-financial-intelligence > :first-child {
    margin-top: 0;
}

.syg-yacht-directory > :last-child,
.syg-yacht-single-column > section > :last-child,
.syg-yacht-single-column > aside > :last-child,
.syg-yacht-single-column > article > :last-child,
#where-can-my-yacht-go > :last-child,
#similar-yachts > :last-child,
#accounts-financial-intelligence > :last-child {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    :root {
        --syg-yacht-section-padding: 1rem;
    }
}

/* Migrated Yacht block 11 */
/* SYG STANDARD YACHT SECTION SPACING V2 */
:root {
    --syg-yacht-section-gap:
        clamp(1.25rem, 2vw, 1.75rem);
}

/*
 * Apply one consistent vertical separation to every
 * standard top-level yacht-page box.
 *
 * Existing section-specific margins are overridden,
 * but internal padding and internal content margins
 * remain unchanged.
 */
.syg-yacht-directory,
.syg-yacht-single-column > section,
.syg-yacht-single-column > aside,
.syg-yacht-single-column > article,
#where-can-my-yacht-go,
#similar-yachts,
#accounts-financial-intelligence {
    margin-top: 0 !important;
    margin-bottom:
        var(--syg-yacht-section-gap) !important;
}

/* ==========================================================
   SUPERYACHT GUIDE — YACHT PAGE COMPONENTS
   Clean design-system alignment
   ========================================================== */

.syg-letter-spacing-12 {
    letter-spacing: .12em;
}

.syg-letter-spacing-08 {
    letter-spacing: .08em;
}

.syg-max-width-780 {
    max-width: 780px;
}

.syg-max-width-760 {
    max-width: 760px;
}

.syg-overflow-visible {
    overflow: visible;
}

.syg-yacht-directory,
.syg-finance-pastel-panel,
.syg-yacht-single-column > section,
.syg-yacht-single-column > article,
.syg-yacht-single-column > aside {
    border-color: var(--syg-border) !important;
    border-radius: var(--syg-radius) !important;
    background: var(--syg-white) !important;
    box-shadow: none !important;
}

.syg-section-title,
.syg-yacht-directory__heading {
    color: var(--syg-navy) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
}

.syg-yacht-directory__fact,
.syg-yacht-directory__name-block {
    border-color: var(--syg-border-soft);
}

.syg-yacht-directory__name-label,
.syg-yacht-directory__empty {
    color: var(--syg-text-secondary);
}

.syg-yacht-directory__name-value {
    color: var(--syg-text);
    font-weight: 600;
}

.syg-yacht-marina-card,
.syg-similar-yacht-card {
    border: 1px solid var(--syg-border) !important;
    border-radius: var(--syg-radius) !important;
    background: var(--syg-white) !important;
    box-shadow: var(--syg-shadow) !important;
}

.syg-yacht-gallery-image,
.syg-yacht-gallery-image-wrapper,
.yacht-gallery-image {
    border-radius: var(--syg-radius);
}

.syg-yacht-cta,
.syg-yacht-button,
.syg-yacht-lightbox-button {
    border-radius: var(--syg-radius-small);
}

.syg-finance__summary,
.syg-finance__details {
    border-color: var(--syg-border);
}

.syg-yacht-lightbox {
    font-family: var(--syg-font);
}