/*
 * Tailorbirds Patterns — frontend & editor styles
 *
 * Provides the visual scaffolding the patterns assume: cover-block min-heights,
 * image aspect ratios for circles/portraits, button styles that don't depend
 * on theme.json, and responsive defaults so patterns look correct out of the
 * box on any WordPress site.
 *
 * Loaded both in the editor (so patterns preview correctly) and on the
 * frontend (so they render correctly).
 */

/* ---------- Cover blocks: min-height + aspect ---------- */

.wp-block-cover.section-hero,
.wp-block-cover.tailorbirds-hero,
.wp-block-cover.landing-section {
    min-height: 60vh;
    overflow: visible;
}

@media (min-width: 768px) {
    .wp-block-cover.section-hero,
    .wp-block-cover.tailorbirds-hero {
        min-height: 80vh;
    }
}

/* Cover content always centers vertically */
.wp-block-cover.section-hero .wp-block-cover__inner-container,
.wp-block-cover.tailorbirds-hero .wp-block-cover__inner-container,
.wp-block-cover.landing-section .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------- Image aspect ratios ---------- */

/* Circle images: keep them perfectly round even when parent is narrow */
.wp-block-image img[style*="border-radius:50%"],
.wp-block-image img[style*="border-radius: 50%"] {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Inline HTML circles (the most common pattern in team blocks) */
.wp-block-html img[style*="border-radius:50%"],
.wp-block-html img[style*="border-radius: 50%"] {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* Wide / banner images keep proportion */
.wp-block-image.aligncenter img,
.wp-block-image.alignwide img,
.wp-block-image.alignfull img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Responsive columns ---------- */

/* Patterns rely on column layouts collapsing to single column on mobile.
 * Core does this for some breakpoints but not all themes — make it explicit. */
@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0;
    }
}

/* ---------- Buttons ---------- */

/* Patterns assume rounded buttons by default; ensure that even on themes
 * that strip border-radius. Inline styles override anyway, this is fallback. */
.wp-block-button .wp-block-button__link,
.wp-element-button {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
    transform: translateY(-1px);
}

/* ---------- Section padding sanity ---------- */

/* Tailorbirds .landing-section and .section-* classes get sensible default
 * vertical padding so sections don't visually mash together. */
.landing-section {
    padding-top: clamp(40px, 6vw, 80px);
    padding-bottom: clamp(40px, 6vw, 80px);
}

/* ---------- Typography ---------- */

/* Patterns use x-large/large font sizes and assume something readable.
 * Provide fallbacks for themes that don't define these. */
.has-x-large-font-size {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15;
}

.has-large-font-size {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    line-height: 1.25;
}

.has-medium-font-size {
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.6;
}

/* ---------- Gallery / grid spacing ---------- */

.wp-block-gallery.has-nested-images figure.wp-block-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------- Color contrast safety nets ---------- */

/*
 * Many themes set body { color: #fff } in dark mode or theme.json palette.
 * That bleeds into pattern sections that have light backgrounds, producing
 * unreadable white-on-white text. Force a sane dark default text color
 * inside Tailorbirds sections that use a light background, regardless of
 * what the theme inherits.
 */

/* Sections with named light backgrounds get explicit dark text. */
.wp-block-group.has-white-background-color,
.wp-block-group.has-base-background-color,
.wp-block-group.has-base-2-background-color,
.wp-block-group[style*="background-color:#fff"],
.wp-block-group[style*="background-color: #fff"],
.wp-block-group[style*="background-color:#f"],
.wp-block-group[style*="background-color: #f"] {
    color: #1f2937;
}

/* Inherit the dark color into descendants that don't have explicit color. */
.wp-block-group.has-white-background-color *:not([class*="has-text-color"]):not([style*="color"]),
.wp-block-group[style*="background-color:#fff"] *:not([class*="has-text-color"]):not([style*="color"]),
.wp-block-group[style*="background-color: #fff"] *:not([class*="has-text-color"]):not([style*="color"]) {
    color: inherit;
}

/* <details> / <summary> default to body text color, which can be wrong on
 * dark themes. Pin them to dark when the surrounding details has a light bg. */
.wp-block-details[style*="background-color:#fff"],
.wp-block-details[style*="background-color: #fff"],
.wp-block-details.has-white-background-color {
    color: #1f2937;
}
.wp-block-details[style*="background-color:#fff"] summary,
.wp-block-details[style*="background-color: #fff"] summary,
.wp-block-details.has-white-background-color summary {
    color: #1f2937;
    font-weight: 600;
    cursor: pointer;
}
.wp-block-details[style*="background-color:#fff"] summary::marker,
.wp-block-details[style*="background-color: #fff"] summary::marker {
    color: #6b7280;
}

/* Headings without explicit color inside dark cover blocks → white. */
.wp-block-cover .wp-block-heading:not([class*="has-text-color"]):not([style*="color"]),
.wp-block-cover.is-dark .wp-block-heading {
    color: #fff;
}

/* ---------- Image sizing inside columns / cards ---------- */

/*
 * Pattern cards often use .wp-block-image with no explicit width — without a
 * theme that sets max-width on these, they overflow narrow columns or render
 * at natural pixel size on desktop. Cap them and let object-fit handle ratio.
 */
.wp-block-column .wp-block-image img,
.wp-block-group .wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Patterns that wrap an <img> in inline styles (icon-style images) shouldn't
 * be stretched by CSS resets. Respect the inline width/height. */
.wp-block-html img[style*="width:"][style*="height:"] {
    max-width: 100%;
    height: auto;
}

/* ---------- Cover block image sizing fix (desktop heroes) ---------- */

/* Cover background images should always fill the cover block edge-to-edge,
 * regardless of theme rules that try to constrain them. */
.wp-block-cover > img.wp-block-cover__image-background,
.wp-block-cover > video.wp-block-cover__video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.wp-block-cover > picture {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.wp-block-cover > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
}

/* ---------- Icon imgs: center reliably, ignore theme display:block ---------- */

/*
 * Patterns wrap icons in <div style="text-align:center"> and rely on the img
 * being inline so text-align centers it. Many themes set img { display: block }
 * which kills horizontal centering. Force inline-block so text-align works.
 */
img.no-lazyload,
img.skip-lazy,
img[src*="tailorbirds-patterns/assets/icons/"] {
    display: inline-block !important;
    vertical-align: middle;
}

/* Inside an explicit text-align:center wrapper, also force margin auto so
 * icons truly sit in the middle even on themes that override display. */
[style*="text-align:center"] > img,
[style*="text-align: center"] > img {
    margin-left: auto;
    margin-right: auto;
}

/* Cards / column images should never overflow their column at desktop. */
.wp-block-column figure.wp-block-image,
.wp-block-column .wp-block-image {
    width: 100%;
}
.wp-block-column figure.wp-block-image img,
.wp-block-column .wp-block-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Multi-column product / feature card grids should size every image
 * identically so 3 columns don't have one image visibly bigger than the
 * others (this was the issue on dark-product-cards-section / pattern 23). */
.wp-block-columns > .wp-block-column figure.wp-block-image img,
.wp-block-columns > .wp-block-column > .wp-block-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}