/**
 * Related attractions grid — [related-attractions-by-country]
 *
 * Everything is scoped under .tr-attractions so it cannot reach the legacy .card
 * tiles that [related-attractions-by-city], the destination archives and the
 * stop-details block still render.
 *
 * No font-family is declared anywhere in this plugin: typography comes from the
 * Elementor global kit, and that stays true here. Only sizes and weights are set.
 *
 * Mobile-first. The base rules are the design's 390px variant and the single
 * min-width:768px block is its desktop variant — the same two-variant split the
 * design file draws, and the same breakpoint tr-daytour-archive.js treats as
 * "mobile".
 */

.tr-attractions {
    /* The greys and the scrim ink the design needs that the site palette does not
       name. Local to this block rather than added to the global token list, which
       is deliberately small. */
    --tr-attractions-ink: var(--transfer-ride-main-dark, #12171c);
    --tr-attractions-body: #5a6572;
    /* Light blue against the navy promo tile. The design used a lime green here;
       the site has no green, so this is the same job done with the blue family. */
    --tr-attractions-on-navy: #a9c9de;
    --tr-attractions-caption: #c3d8e8;
    --tr-attractions-placeholder: #dde3e9;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Section head ---------- */

.tr-attractions__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Keeps the intro to a readable measure instead of letting it run the full
       width of a wide Elementor container. */
    max-width: 620px;
}

/* Elementor's kit typography lands as `.elementor-kit-NNN h2` (0,1,1) and beats a
   single class, so the heading needs the extra ancestor to hold the design's size.
   Same trick as .tr-tours .tr-tour-card h3.tr-tour-card__title. */
.tr-attractions h2.tr-attractions__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--tr-attractions-ink);
    /* Balances the last line instead of leaving one orphaned word. Ignored by
       browsers that don't support it. */
    text-wrap: pretty;
}

.tr-attractions .tr-attractions__intro {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tr-attractions-body);
    text-wrap: pretty;
}

/* ---------- Grid ---------- */

/* Two up on phones, three on everything else. An explicit ladder rather than
   auto-fill, for the reason spelled out on .tr-tours__grid: auto-fill resolves
   against whatever width the Elementor container happens to have and grows a
   fourth column on a wide page. */
.tr-attractions__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* ---------- Tile ---------- */

.tr-attractions .tr-attractions__tile,
.tr-attractions .tr-attractions__tile:link,
.tr-attractions .tr-attractions__tile:visited {
    position: relative;
    display: block;
    height: 210px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--tr-attractions-placeholder);
    text-decoration: none;
}

.tr-attractions .tr-attractions__tile:hover,
.tr-attractions .tr-attractions__tile:focus {
    text-decoration: none;
}

/* The tile is one link, so the whole card takes the focus ring rather than some
   inner element. */
.tr-attractions .tr-attractions__tile:focus-visible {
    outline: 2px solid var(--transfer-ride-main, #046095);
    outline-offset: 3px;
}

.tr-attractions__media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

/* `.elementor img` sets height:auto at the same specificity a single class would
   have (0,1,1), so on a tie it wins on source order and the image collapses to its
   natural height inside the fixed-height tile. Going through two ancestor classes
   outranks it — the same fix tr-daytour-archive.css needs for its media box. */
.tr-attractions .tr-attractions__tile .tr-attractions__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.tr-attractions .tr-attractions__tile:hover .tr-attractions__media img,
.tr-attractions .tr-attractions__tile:focus-visible .tr-attractions__media img {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {

    .tr-attractions .tr-attractions__tile .tr-attractions__media img,
    .tr-attractions .tr-attractions__tile:hover .tr-attractions__media img,
    .tr-attractions .tr-attractions__tile:focus-visible .tr-attractions__media img {
        transform: none;
        transition: none;
    }
}

/* Carries the caption text off the photo. Starts at 42% so the top of the image
   stays untinted. */
.tr-attractions__scrim {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(180deg, rgba(8, 26, 42, 0) 42%, rgba(8, 26, 42, .78) 100%);
    pointer-events: none;
}

.tr-attractions__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: flex-end;
    align-items: flex-start;
    box-sizing: border-box;
    height: 100%;
    padding: 13px;
    pointer-events: none;
}

/* The theme sets a link colour with enough specificity to beat a single class,
   which is what turned the day-tour CTA black. Both caption lines are inside an
   <a>, so both are spelled out through .tr-attractions .tr-attractions__tile to
   stay white in every state. */
.tr-attractions .tr-attractions__tile .tr-attractions__name {
    display: block;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: pretty;
}

.tr-attractions .tr-attractions__tile .tr-attractions__region {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--tr-attractions-caption);
}

/* ---------- Promo tile ---------- */

/* Sits in the grid rather than beside it, so on two columns it takes the full row
   instead of standing half-width next to a photo tile. */
.tr-attractions__promo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    grid-column: span 2;
    box-sizing: border-box;
    min-height: 170px;
    padding: 20px;
    border-radius: 14px;
    background: var(--transfer-ride-main-dark-accent, #0b5179);
}

.tr-attractions__promo-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tr-attractions__promo-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tr-attractions-on-navy);
}

.tr-attractions .tr-attractions__promo-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: pretty;
}

/* White on navy, not the brand blue on navy: the tile is already the accent, so
   the button has to invert to stay legible. Every state is spelled out for the
   same reason the tile caption is. */
.tr-attractions .tr-attractions__promo-cta,
.tr-attractions .tr-attractions__promo-cta:link,
.tr-attractions .tr-attractions__promo-cta:visited {
    align-self: flex-start;
    padding: 11px 18px;
    border-radius: 8px;
    background: #fff;
    color: var(--transfer-ride-main, #046095);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.tr-attractions .tr-attractions__promo-cta:hover,
.tr-attractions .tr-attractions__promo-cta:focus,
.tr-attractions .tr-attractions__promo-cta:active {
    background: var(--trasnfer-ride-light-hover, #efefef);
    color: var(--transfer-ride-main-hover, #0879ba);
    text-decoration: none;
}

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
    .tr-attractions {
        gap: 20px;
    }

    .tr-attractions h2.tr-attractions__title {
        font-size: 28px;
    }

    .tr-attractions__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .tr-attractions .tr-attractions__tile,
    .tr-attractions .tr-attractions__tile:link,
    .tr-attractions .tr-attractions__tile:visited {
        height: 290px;
        border-radius: 16px;
    }

    .tr-attractions__body {
        padding: 18px;
    }

    .tr-attractions .tr-attractions__tile .tr-attractions__name {
        font-size: 20px;
    }

    .tr-attractions__promo {
        grid-column: auto;
        min-height: 290px;
        padding: 24px;
        border-radius: 16px;
    }
}