/**
 * WTGStudio — Guide Grid block
 *
 * Field-guide library styling, not an admin table. Typography and color
 * are inherited from the active theme: text uses `inherit`/`currentColor`,
 * surfaces use theme.json custom properties with neutral fallbacks, and
 * borders are derived from the inherited text color. Nothing here is a
 * Wild Things Guide brand color or a Kadence-specific selector, so the
 * block picks up whatever palette and font stack the theme supplies.
 */

.wtg-guide-grid {
    display: grid;
    grid-template-columns: repeat(var(--wtg-guide-grid-columns, 3), minmax(0, 1fr));
    gap: var(--wtg-guide-grid-gap, 1.75rem);
    /* Appearance (5.22.0): each axis can be set per block. Unset, both
       fall back to the same value the single gap above always used. */
    column-gap: var(--wtg-guide-grid-column-gap, var(--wtg-guide-grid-gap, 1.75rem));
    row-gap: var(--wtg-guide-grid-row-gap, var(--wtg-guide-grid-gap, 1.75rem));
    margin: 0;
    padding: 0;
    list-style: none;
}

.wtg-guide-grid-cols-1 { --wtg-guide-grid-columns: 1; }
.wtg-guide-grid-cols-2 { --wtg-guide-grid-columns: 2; }
.wtg-guide-grid-cols-3 { --wtg-guide-grid-columns: 3; }
.wtg-guide-grid-cols-4 { --wtg-guide-grid-columns: 4; }

/* Equal-height cards: each card fills its grid row, and the body grows
   to absorb uneven excerpt lengths so the bottoms line up. */
.wtg-guide-grid-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 10px;
    background: var(--wp--preset--color--base, #fff);
    transition: box-shadow .2s ease, transform .2s ease;
}

/* color-mix is widely supported but not universal; older browsers get a
   plain neutral border from this earlier declaration order fallback. */
@supports not (color: color-mix(in srgb, currentColor 14%, transparent)) {
    .wtg-guide-grid-card {
        border-color: rgba(0, 0, 0, .12);
    }
}

.wtg-guide-grid-card:hover,
.wtg-guide-grid-card:focus-within {
    box-shadow: 0 8px 26px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

/* Consistent image dimensions regardless of the source Featured Image:
   a fixed aspect ratio box with the image cropped to fill it. */
.wtg-guide-grid-thumb {
    display: block;
    aspect-ratio: var(--wtg-guide-grid-aspect, 4 / 3);
    overflow: hidden;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.wtg-guide-grid-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.wtg-guide-grid-card:hover .wtg-guide-grid-thumb img {
    transform: scale(1.03);
}

.wtg-guide-grid-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.wtg-guide-grid-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .55rem;
    padding: 1.1rem 1.25rem 1.3rem;
}

.wtg-guide-grid-title {
    margin: 0;
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1.35;
}

.wtg-guide-grid-title a {
    color: inherit;
    text-decoration: none;
}

.wtg-guide-grid-title a:hover,
.wtg-guide-grid-title a:focus {
    text-decoration: underline;
}

.wtg-guide-grid-excerpt {
    flex: 1 1 auto;
    margin: 0;
    color: currentColor;
    opacity: .72;
    font-size: .92rem;
    line-height: 1.55;
}

.wtg-guide-grid-button {
    align-self: flex-start;
    margin-top: .35rem;
    padding: .5em 1.1em;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ---------------------------------------------------------------
 * Open Guide button colors (5.22.0)
 *
 * Before 5.22.0 the button set only `color: inherit` (specificity
 * 0,1,0) and painted its hover background with `currentColor`. A theme
 * rule such as `a:hover { color: blue }` (0,1,1) outranked the inherit,
 * so on hover the text turned the theme's link color — and the
 * background, being currentColor, turned the very same color. The
 * result was blue text on a blue button.
 *
 * Every state is now set explicitly, with both colors coming from
 * custom properties rather than from currentColor, under selectors
 * scoped to the grid (0,4,1 base, 0,5,1 with a state) — enough to
 * outrank ordinary theme link rules such as `a:visited`,
 * `.entry-content a:hover`, and even Twenty Twenty-One's
 * `.site a:focus:not(…):not(…)` (0,4,1), which otherwise swaps in its
 * own background and a transparent outline — without !important. The
 * fallbacks are the corrected defaults; a block's Appearance settings
 * supply the custom properties when set.
 * ------------------------------------------------------------- */

.wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button,
.wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button:link,
.wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button:visited {
    background-color: var(--wtg-guide-grid-button-bg, #285C4D);
    border-color: var(--wtg-guide-grid-button-bg, #285C4D);
    color: var(--wtg-guide-grid-button-text, #FFFFFF);
    text-decoration: none;
}

.wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button:hover,
.wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button:focus,
.wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button:active {
    background-color: var(--wtg-guide-grid-button-hover-bg, #1D4439);
    border-color: var(--wtg-guide-grid-button-hover-bg, #1D4439);
    color: var(--wtg-guide-grid-button-hover-text, #FFFFFF);
    text-decoration: none;
}

/* Keyboard focus: a solid ring in the hover background color, separated
   from the button by a white halo so it reads on light and dark pages
   alike. :focus-visible keeps it off mouse clicks; it stays for as long
   as the button holds focus, including while hovered. */
.wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button:focus-visible {
    outline: 3px solid var(--wtg-guide-grid-button-hover-bg, #1D4439);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #FFFFFF;
}

/* Browsers without :focus-visible show the ring on any focus. */
@supports not selector(:focus-visible) {
    .wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button:focus {
        outline: 3px solid var(--wtg-guide-grid-button-hover-bg, #1D4439);
        outline-offset: 2px;
        box-shadow: 0 0 0 2px #FFFFFF;
    }
}

/* The visually hidden title inside the button (when the card title is
   off) always takes the button's own color. */
.wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button span {
    color: inherit;
}

@media (forced-colors: active) {
    .wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button {
        border-color: ButtonText;
    }

    .wtg-guide-grid .wtg-guide-grid-card .wtg-guide-grid-body a.wtg-guide-grid-button:focus-visible {
        outline-color: Highlight;
    }
}

/* ---------------------------------------------------------------
 * Card title colors (5.22.0)
 *
 * Gated on modifier classes the block adds only when the color is set.
 * Unset, none of these rules match and the title keeps exactly the
 * theme-inherited colors it always had.
 * ------------------------------------------------------------- */

.wtg-guide-grid-has-title-color .wtg-guide-grid-card .wtg-guide-grid-title a,
.wtg-guide-grid-has-title-color .wtg-guide-grid-card .wtg-guide-grid-title a:link,
.wtg-guide-grid-has-title-color .wtg-guide-grid-card .wtg-guide-grid-title a:visited {
    color: var(--wtg-guide-grid-title-color);
}

.wtg-guide-grid-has-title-hover-color .wtg-guide-grid-card .wtg-guide-grid-title a:hover,
.wtg-guide-grid-has-title-hover-color .wtg-guide-grid-card .wtg-guide-grid-title a:focus,
.wtg-guide-grid-has-title-hover-color .wtg-guide-grid-card .wtg-guide-grid-title a:active {
    color: var(--wtg-guide-grid-title-hover-color);
}

.wtg-guide-grid-notice {
    padding: 1.25rem 1.5rem;
    border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 8px;
    opacity: .75;
    font-size: .95rem;
}

/* ---------------------------------------------------------------
 * Responsive: three columns step to two, then one.
 * Four columns take an extra step down so cards never get too narrow.
 * ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .wtg-guide-grid-cols-4 { --wtg-guide-grid-columns: 3; }
}

@media (max-width: 860px) {
    .wtg-guide-grid-cols-3,
    .wtg-guide-grid-cols-4 { --wtg-guide-grid-columns: 2; }
}

@media (max-width: 560px) {
    .wtg-guide-grid-cols-2,
    .wtg-guide-grid-cols-3,
    .wtg-guide-grid-cols-4 { --wtg-guide-grid-columns: 1; }

    .wtg-guide-grid {
        gap: 1.25rem;
        /* A gap set in Appearance still applies on phones; unset, the
           phone gap stays the 1.25rem it has always been. */
        column-gap: var(--wtg-guide-grid-column-gap, 1.25rem);
        row-gap: var(--wtg-guide-grid-row-gap, 1.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wtg-guide-grid-card,
    .wtg-guide-grid-thumb img {
        transition: none;
    }

    .wtg-guide-grid-card:hover {
        transform: none;
    }

    .wtg-guide-grid-card:hover .wtg-guide-grid-thumb img {
        transform: none;
    }
}

/* ---------------------------------------------------------------
 * View All
 *
 * Defined here rather than in guide-directory.css so there is one
 * definition serving all three places the link appears: the Guide Grid
 * block, the [wtg_guide_grid] shortcode and the Guide Category
 * directory. guide-directory.css declares this file as a dependency, so
 * the shortcode and the directory load it too.
 * ------------------------------------------------------------- */

/* The outer element the block emits only when it draws a View All link,
   because the link must sit beside the grid rather than inside it as a
   grid cell. Without a link the block emits no wrapper at all. */
.wtg-guide-grid-wrap {
    margin: 0;
}

.wtg-guide-view-all {
    margin: var(--wtg-guide-view-all-spacing, 1.25rem) 0 0;
}

/* A spacing set in Appearance must win over theme paragraph margins.
   Unset, the block adds no class and only the rule above applies. */
.wtg-guide-grid-has-view-all-spacing p.wtg-guide-view-all {
    margin-top: var(--wtg-guide-view-all-spacing, 1.25rem);
}

.wtg-guide-view-all-link {
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.wtg-guide-view-all-link:hover,
.wtg-guide-view-all-link:focus {
    text-decoration: underline;
}

/* View All colors (5.22.0) — class-gated like the title colors, so an
   unset color leaves the theme-inherited link color untouched. */
.wtg-guide-grid-has-view-all-color .wtg-guide-view-all a.wtg-guide-view-all-link,
.wtg-guide-grid-has-view-all-color .wtg-guide-view-all a.wtg-guide-view-all-link:link,
.wtg-guide-grid-has-view-all-color .wtg-guide-view-all a.wtg-guide-view-all-link:visited {
    color: var(--wtg-guide-view-all-color);
}

.wtg-guide-grid-has-view-all-hover-color .wtg-guide-view-all a.wtg-guide-view-all-link:hover,
.wtg-guide-grid-has-view-all-hover-color .wtg-guide-view-all a.wtg-guide-view-all-link:focus,
.wtg-guide-grid-has-view-all-hover-color .wtg-guide-view-all a.wtg-guide-view-all-link:active {
    color: var(--wtg-guide-view-all-hover-color);
}

/* The arrow slides a little on hover. Purely decorative and hidden from
   assistive technology in the markup. */
.wtg-guide-view-all-arrow {
    transition: transform .2s ease;
}

.wtg-guide-view-all-link:hover .wtg-guide-view-all-arrow,
.wtg-guide-view-all-link:focus .wtg-guide-view-all-arrow {
    transform: translateX(3px);
}

/* Present so the count can be styled or hidden on its own. */
.wtg-guide-count {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .wtg-guide-view-all-arrow {
        transition: none;
        transform: none;
    }
}

/* ---------------------------------------------------------------
 * Editor preview only
 * ------------------------------------------------------------- */

/* The preview is real markup with real links; clicking one inside the
   editor would navigate away from the post being edited. */
.wtg-guide-grid-editor-preview .wtg-guide-grid a,
.wtg-guide-grid-editor-preview .wtg-guide-view-all-link {
    pointer-events: none;
    cursor: default;
}

.wtg-guide-grid-editor-preview .wtg-guide-grid-card:hover {
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------
 * Whole-card click
 *
 * The image and the title were already links to the same guide. This
 * makes the rest of the card — the padding, the gap beside a short
 * title, the empty space under an excerpt — part of the same link, so
 * the card behaves the way a card looks like it should.
 *
 * Done with an overlay generated from the title link rather than by
 * wrapping the card in an anchor or adding a click handler, which keeps
 * the markup and the accessibility tree exactly as they were: one
 * focusable link per card, announced with the guide's title. There is no
 * JavaScript, and a card with its title hidden simply keeps the older
 * image-and-title behaviour, because the overlay is generated from the
 * title link that is then not there.
 * ------------------------------------------------------------- */

.wtg-guide-grid-card {
    position: relative;
}

.wtg-guide-grid-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Anything the reader is meant to select or click in its own right sits
   above the overlay. The button goes to the same guide either way, but
   it must still look and feel like a button. */
.wtg-guide-grid-excerpt,
.wtg-guide-grid-button {
    position: relative;
    z-index: 2;
}