/**
 * Legacy Block Styles — Ported from Gatsby
 *
 * Styles for the 12 legacy ACF post-level blocks.
 * Uses CSS custom properties from global.css.
 */

/* ===== Sing Card ===== */
.vibemap-sing-card {
    margin-bottom: var(--sp-item, 20px);
}

.vibemap-sing-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-card, 20px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background: var(--color-white);
    min-height: 130px;
}

.vibemap-sing-card__link:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.vibemap-sing-card__image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vibemap-sing-card__content {
    padding: 17px 14px 5px;
    min-height: 120px;
}

.vibemap-sing-card__badge {
    display: inline-block;
    font-size: var(--fs-small, 0.75rem);
    font-weight: var(--fw-link, 600);
    text-transform: uppercase;
    padding: 4px 8px;
    background: var(--color-primary, #000000);
    color: var(--color-white);
    border-radius: var(--radius-small, 4px);
    margin-bottom: 8px;
}

.vibemap-sing-card__title {
    margin: 0;
    font-size: 17px;
    font-family: var(--family-sans);
    font-weight: var(--fw-medium, 400);
    line-height: 1.3;
    max-height: 41px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Sing Cards ===== */
.vibemap-sing-cards__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: var(--sp-small, 20px);
}

@media (max-width: 768px) {
    .vibemap-sing-cards__grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1087px) {
    .vibemap-sing-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vibemap-sing-cards__card {
    border-radius: var(--radius-card, 20px);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background: var(--color-white);
    min-height: 130px;
}

.vibemap-sing-cards__card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.vibemap-sing-cards__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.vibemap-sing-cards__card-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vibemap-sing-cards__card-content {
    padding: 17px 14px 5px;
    min-height: 120px;
}

.vibemap-sing-cards__card-title {
    margin: 0;
    font-size: 17px;
    font-family: var(--family-sans);
    font-weight: var(--fw-medium, 400);
    line-height: 1.3;
}

/* ===== Image Block ===== */
.vibemap-image-block {
    margin-bottom: var(--sp-item, 20px);
}

.vibemap-image-block img {
    border-radius: var(--radius-small, 4px);
    width: 100%;
    object-fit: cover;
}

.vibemap-image-block figcaption {
    font-size: var(--fs-base, 0.875rem);
    color: var(--color-grey, #777);
    margin-top: 8px;
    text-align: center;
}

/* ===== Gallery Block ===== */
.vibemap-gallery-block__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: var(--sp-tiny, 10px);
}

@media (max-width: 768px) {
    .vibemap-gallery-block__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vibemap-gallery-block__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-small, 4px);
}

.vibemap-gallery-block__item figcaption {
    font-size: var(--fs-small, 0.75rem);
    color: var(--color-grey, #777);
    margin-top: 4px;
    text-align: center;
}

/* ===== Video Block ===== */
.vibemap-video-block__embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-small, 4px);
}

.vibemap-video-block__embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===== Embed Block ===== */
.vibemap-embed-block {
    margin-bottom: var(--sp-item, 20px);
}

.vibemap-embed-block__heading {
    margin-bottom: var(--sp-tiny, 10px);
}

/* ===== Delayed Embed Block ===== */
.vibemap-delayed-embed-block__container {
    min-height: 100px;
}

/* ===== Quotes Block ===== */
.vibemap-quotes-block__quote {
    border-left: 4px solid var(--color-primary, #000000);
    padding: var(--sp-tiny, 10px) var(--sp-small, 20px);
    margin: 0 0 var(--sp-item, 20px);
    background: var(--color-subtle-grey, #fafafa);
    border-radius: 0 var(--radius-small, 4px) var(--radius-small, 4px) 0;
}

.vibemap-quotes-block__quote p {
    font-family: var(--family-serif);
    font-size: var(--fs-large, 1.125rem);
    font-style: italic;
    font-weight: var(--fw-light, 200);
    margin-bottom: 8px;
}

.vibemap-quotes-block__quote cite {
    font-size: var(--fs-base, 0.875rem);
    color: var(--color-grey, #777);
    font-style: normal;
}

/* ===== Map Block ===== */
.vibemap-map-block {
    margin-bottom: var(--sp-item, 20px);
}

.vibemap-map-block__fallback {
    border-radius: var(--radius-card, 20px);
}

/* ===== Link Cards Block ===== */
.vibemap-link-cards-block__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: var(--sp-small, 20px);
}

@media (max-width: 768px) {
    .vibemap-link-cards-block__grid {
        grid-template-columns: 1fr;
    }
}

.vibemap-link-cards-block__card {
    display: flex;
    align-items: flex-end;
    min-height: 200px;
    padding: var(--sp-small, 20px);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card, 20px);
    text-decoration: none;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.vibemap-link-cards-block__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.7));
    border-radius: inherit;
}

.vibemap-link-cards-block__card:hover {
    transform: translateY(-2px);
    color: var(--color-white);
}

.vibemap-link-cards-block__card-content {
    position: relative;
    z-index: 1;
}

.vibemap-link-cards-block__card-title {
    margin: 0;
    font-size: var(--fs-h4, 1.375rem);
    font-family: var(--family-serif);
    color: var(--color-white);
}

.vibemap-link-cards-block__card-desc {
    margin: 4px 0 0;
    font-size: var(--fs-base, 0.875rem);
    opacity: 0.9;
}

/* ===== About Author Block ===== */
.vibemap-about-author-block__inner {
    display: flex;
    gap: var(--sp-small, 20px);
    align-items: center;
    padding: var(--sp-base, 40px);
    background: var(--color-subtle-grey, #fafafa);
    border-radius: var(--radius-card, 20px);
}

@media (max-width: 768px) {
    .vibemap-about-author-block__inner {
        flex-direction: column;
        text-align: center;
    }
}

.vibemap-about-author-block__photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

@media (min-width: 1088px) {
    .vibemap-about-author-block__photo img {
        width: 200px;
        height: 200px;
    }
}

.vibemap-about-author-block__name {
    margin: 0 0 8px;
    font-family: var(--family-serif);
}

.vibemap-about-author-block__bio {
    color: var(--color-grey, #777);
    margin-bottom: 8px;
}

.vibemap-about-author-block__social {
    display: flex;
    gap: var(--sp-tiny, 10px);
    flex-wrap: wrap;
}

.vibemap-about-author-block__social a {
    font-size: var(--fs-base, 0.875rem);
}

/* ===== WYSIWYG Fallback ===== */
.vibemap-wysiwyg-fallback {
    margin-bottom: var(--sp-item, 20px);
}

/* ==========================================================================
   Place / event cards  (sing-card, sing-cards)
   --------------------------------------------------------------------------
   One card component serves both blocks. `--grid` stacks image over text and is
   used for the carousel rail; `--list` runs them side by side.

   The carousel is a scroll-snap rail rather than a JS slider: no script to
   load, it collapses to a normal row when everything fits, and keyboard and
   touch scrolling keep working.
   ========================================================================== */

.vibemap-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border-grey);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

a.vibemap-card:hover,
a.vibemap-card:focus-visible {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

/* The whole card is the link, so WordPress's global `a { text-decoration:
   underline }` (emitted inline from theme.json, after every enqueued
   stylesheet) underlines the badge, title, meta and body copy alike.

   Two things force !important here. Text decoration propagates from an
   ancestor box to its inline descendants and cannot be cancelled further down
   the tree, so the rule has to land on the <a> itself; and the inline global
   styles beat a plain `a.vibemap-card` selector in this document's cascade —
   verified in the browser, not assumed. Only the title should read as a link. */
a.vibemap-card,
a.vibemap-card:hover,
a.vibemap-card:focus-visible {
    text-decoration: none !important;
}

.vibemap-card * {
    text-decoration: none;
}

a.vibemap-card:hover .vibemap-card__title,
a.vibemap-card:focus-visible .vibemap-card__title {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.vibemap-card__image {
    aspect-ratio: 16 / 10;
    background: var(--color-subtle-grey);
    flex: none;
}

.vibemap-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vibemap-card__body {
    padding: var(--sp-text);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vibemap-card__badge {
    font-size: var(--fs-tiny);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-grey);
}

.vibemap-card__title {
    font-family: var(--family-serif);
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    margin: 0;
}

.vibemap-card__meta {
    font-size: var(--fs-small);
    color: var(--color-grey);
    margin: 0;
}

.vibemap-card__text {
    font-size: var(--fs-base);
    line-height: 1.55;
}

/* Descriptions come straight from the API and run long; cap them so a rail of
   cards keeps a consistent height instead of one card stretching the row. List
   cards are wider, so they get a little more room before clamping. */
.vibemap-card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vibemap-card--grid .vibemap-card__text {
    -webkit-line-clamp: 4;
}

.vibemap-card--list .vibemap-card__text {
    -webkit-line-clamp: 6;
}

.vibemap-card__text p {
    margin: 0 0 0.6em;
}

.vibemap-card__text p:last-child {
    margin-bottom: 0;
}

.vibemap-card__vibes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.vibemap-card__vibes li {
    font-size: var(--fs-tiny);
    text-transform: lowercase;
    color: var(--color-primary-dark);
    background: var(--color-light-grey);
    border-radius: 100px;
    padding: 3px 9px;
}

/* --- list orientation ----------------------------------------------------- */

.vibemap-card--list {
    flex-direction: row;
    align-items: stretch;
}

.vibemap-card--list .vibemap-card__image {
    width: 34%;
    max-width: 260px;
    aspect-ratio: auto;
}

.vibemap-card--list .vibemap-card__body {
    flex: 1;
    padding: var(--sp-item);
}

@media (max-width: 640px) {
    .vibemap-card--list {
        flex-direction: column;
    }

    .vibemap-card--list .vibemap-card__image {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 10;
    }
}

/* --- block wrappers ------------------------------------------------------- */

.vibemap-sing-cards {
    margin: var(--sp-section) 0;
}

.vibemap-sing-cards__heading {
    font-family: var(--family-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    margin: 0 0 var(--sp-tiny);
}

.vibemap-sing-cards__subheading {
    font-size: var(--fs-medium);
    line-height: 1.6;
    margin-bottom: var(--sp-item);
}

.vibemap-sing-cards__rail {
    display: grid;
    gap: var(--sp-item);
}

.vibemap-sing-cards--list .vibemap-sing-cards__rail {
    grid-template-columns: 1fr;
}

.vibemap-sing-cards--carousel .vibemap-sing-cards__rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-tiny);
    overscroll-behavior-x: contain;
}

.vibemap-sing-cards--carousel .vibemap-card {
    scroll-snap-align: start;
}

/* A rail of one or two never needs to scroll — let them fill the row. */
.vibemap-sing-cards--carousel .vibemap-sing-cards__rail[data-count="1"],
.vibemap-sing-cards--carousel .vibemap-sing-cards__rail[data-count="2"] {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    overflow-x: visible;
}

.vibemap-sing-cards__more {
    margin: var(--sp-item) 0 0;
}

.vibemap-sing-cards__more a {
    font-weight: var(--fw-link);
}

/* --- single card block ---------------------------------------------------- */

.vibemap-sing-card {
    margin: var(--sp-item) 0;
}

.vibemap-sing-card--vertical > .vibemap-card {
    max-width: 360px;
}

@media (prefers-reduced-motion: reduce) {
    .vibemap-card {
        transition: none;
    }

    a.vibemap-card:hover,
    a.vibemap-card:focus-visible {
        transform: none;
    }
}

/* "Vibemap Suggests" — an editorially curated rail, set off by a rule. */
.vibemap-sing-cards__suggests {
    margin-bottom: var(--sp-text);
}

.vibemap-sing-cards__suggests hr {
    border: none;
    border-top: 1px solid var(--color-border-grey);
    margin: 0 0 var(--sp-tiny);
}

.vibemap-sing-cards__suggests-heading {
    font-family: var(--family-serif);
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    margin: 0;
}

.vibemap-author-block__name {
    font-family: var(--family-serif);
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    margin: 0 0 6px;
}

/* A linked image should say so on hover — otherwise the only clue that the
   editor attached a link is the cursor. */
.vibemap-image-block__link {
    display: block;
    line-height: 0;
    text-decoration: none !important;
}

.vibemap-image-block__link img {
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vibemap-image-block__link:hover img,
.vibemap-image-block__link:focus-visible img {
    opacity: 0.92;
    transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
    .vibemap-image-block__link img {
        transition: none;
    }
    .vibemap-image-block__link:hover img {
        transform: none;
    }
}