/* No page CSS. This template IS the Aigocy theme's markup, and the theme's own
   stylesheets (bootstrap, swiper, animate, slick, styles.css, the icomoon icon
   font) plus this site's timber.css override layer are served from the uploaded
   `templates/aigocy` bundle and linked in setup/web.headTags.

   They have to load LAST: timber.css re-tints the entire theme through --brand,
   so it must come after styles.css. The renderer emits headTags after every
   <style> block (design -> shell -> fragment -> page), which is exactly the
   order that gives the theme the final word. Putting CSS here would sit BEFORE
   the theme and lose to it — v1 and v2 hand-rolled the look from tokens for
   want of the theme; that is what this version replaces. */

/* Page-specific overrides */
.timber-homepage .section-featured-works .featured-works-item .image {
  aspect-ratio: 4 / 3;
}

.timber-homepage .section-featured-works .featured-works-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Portfolio Card Content Layout (Mobile-first) */
.timber-homepage .section-featured-works .featured-works-item .content .bot .heading {
    margin-bottom: var(--space-3); /* 16px */
}
.timber-homepage .section-featured-works .featured-works-item .content .bot .grid-text {
    display: grid;
    gap: var(--space-3); /* 16px */
}
.timber-homepage .section-featured-works .featured-works-item .content .bot .grid-text > .item {
    margin: 0;
}

/* Desktop: the project title beside ONE full-width row of fact columns.
   The Aigocy theme hard-codes percentage widths on .heading, .grid-text and
   each .grid-text .item — sized for its original 3-item row. With our 4 items
   (O projektu + Materiál + Doba realizace + Místo) those widths collapse the
   content into tiny boxes adrift inside much wider tracks: the summary wrapped
   one word per line while two facts fell to a second row. Reset the widths and
   let flex fill the available space, giving the descriptive "O projektu"
   column extra room over the three short facts. */
@media (min-width: 48rem) {
    .timber-homepage .section-featured-works .featured-works-item .content .bot {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
        gap: var(--space-5);
        align-items: start;
    }

    .timber-homepage .section-featured-works .featured-works-item .content .bot .heading {
        width: auto;
        margin-bottom: 0; /* Replaced by grid gap */
    }

    .timber-homepage .section-featured-works .featured-works-item .content .bot .grid-text {
        width: auto;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    /* flex-basis keeps all four on one row on a wide desktop, yet lets the
       facts wrap to a tidy 2-up on narrow tablets instead of squeezing into
       unreadable ~80px columns. */
    .timber-homepage .section-featured-works .featured-works-item .content .bot .grid-text > .item {
        width: auto;
        flex: 1 1 130px;
        min-width: 0;
    }

    .timber-homepage .section-featured-works .featured-works-item .content .bot .grid-text > .item:first-child {
        flex: 1.8 1 220px;
    }
}


/* Portfolio Gallery styles */
.timber-homepage .section-featured-works .featured-works-item.portfolio-gallery .image {
    position: relative;
    overflow: hidden;
}

.timber-homepage .section-featured-works .featured-works-item.portfolio-gallery .portfolio-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.timber-homepage .section-featured-works .featured-works-item.portfolio-gallery .portfolio-image.is-active {
    opacity: 1;
    position: relative;
}

.timber-homepage .section-featured-works .pagi-dot {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding-top: var(--space-3);
}

.timber-homepage .section-featured-works .pagi-dot .dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--border-subtle);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.timber-homepage .section-featured-works .pagi-dot .dot.active {
    background-color: var(--color-primary);
}