/* ==========================================================================
   Elementor wrapper reset
   Resets Elementor's default 10px vertical padding on .e-con-inner
   for the parent .e-con of this widget only. The :has() selector
   scopes the reset to the container that actually contains
   .kb-creations-service, so unrelated .e-con instances on the
   page are untouched. Left/right padding (gutters) is preserved
   so the section still respects the 32px tablet / 20px mobile
   gutters from the design system. Section root spacing is owned
   by .kb-creations-service below — this block only removes the
   Elementor default inner padding, nothing more.
   ========================================================================== */
.e-con:has(.kb-creations-service) > .e-con-inner {
    padding-block: 0 !important;
}
/* ==========================================================================
   Khaoula Bouabidi — Créations — Service Elementor widget.
   ----------------------------------------------------------------------------
   Reusable dynamic grid of Créations from the `creation` CPT,
   filtered by `creation_service` taxonomy.

   Strictly scoped to the `.kb-creations-service` widget root. Uses
   the existing design tokens (tokens.css + base.css). No Elementor
   wrappers restyled, no radius, no icons, no serif, no italic.

   The grid is a static editorial layout (NOT a carousel). Layout
   is driven by item-count modifier classes so 1 / 2 / 3+ items
   render correctly without any JavaScript.

   Section spacing follows the site rule: top padding only (no
   mirrored bottom padding) so the section reads as one calm
   Porcelain editorial canvas.

   Reference image controls the COMPOSITION. Project design system
   controls the STYLE: Porcelain ground, Raleway display title,
   Montserrat body, Gold eyebrow, no card, no box, no shadow, no
   radius, no border.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Section root.
   ---------------------------------------------------------------------------- */
.kb-creations-service {
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    padding-top: var(--kb-section-space-desktop);
    padding-bottom: 0;
}

.kb-creations-service__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kb-space-xl);
}

/* ----------------------------------------------------------------------------
   Top copy block (eyebrow / title / description) — center aligned.
   ---------------------------------------------------------------------------- */
.kb-creations-service__copy {
    width: 100%;
    max-width: 720px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kb-creations-service__title {
    font-family: var(--kb-font-display);
    font-weight: 300;
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    margin: 0 0 var(--kb-space-m) 0;
}

.kb-creations-service__title-line {
    display: block;
}

.kb-creations-service__description {
    font-family: var(--kb-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--kb-ink);
    opacity: 0.78;
    max-width: 560px;
}

.kb-creations-service__description-line {
    display: block;
}

/* ----------------------------------------------------------------------------
   Grid — desktop 3-column row, single editorial card per item.
   1 / 2 / 3+ layouts are driven by count modifier classes.
   ---------------------------------------------------------------------------- */
.kb-creations-service__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--kb-grid-gap-desktop);
    row-gap: var(--kb-space-xl);
    justify-items: stretch;
    align-items: start;
}

/* 1 item — single card width matching one 3-col slot, centered. */
.kb-creations-service__grid--count-1 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    justify-items: center;
}

.kb-creations-service__grid--count-1 > .kb-creations-service__item {
    grid-column: 2 / 3;
    width: 100%;
    max-width: 360px;
}

/* 2 items — centered pair, same column gap, same per-card width. */
.kb-creations-service__grid--count-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    justify-items: center;
}

.kb-creations-service__grid--count-2 > .kb-creations-service__item {
    width: 100%;
    max-width: 360px;
}

.kb-creations-service__grid--count-2 > .kb-creations-service__item:nth-child(1) {
    grid-column: 1 / 2;
}

.kb-creations-service__grid--count-2 > .kb-creations-service__item:nth-child(2) {
    grid-column: 3 / 4;
}

/* 3+ items — explicit 3 equal columns, rest of the items wrap
   naturally to the next row. */
.kb-creations-service__grid--count-3plus {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ----------------------------------------------------------------------------
   Card.
   ---------------------------------------------------------------------------- */
.kb-creations-service__item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transition: opacity var(--kb-transition-ui);
}

.kb-creations-service__item:hover,
.kb-creations-service__item:focus-visible {
    opacity: 0.85;
}

/* Image — strong editorial crop, no radius, object-fit cover. */
.kb-creations-service__media {
    display: block;
    margin: 0 0 var(--kb-space-m) 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--kb-ink-divider-soft);
    border-radius: 0;
}

.kb-creations-service__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
}

/* Caption row: title left, Gold arrow right, single baseline. */
.kb-creations-service__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kb-space-m);
    font-family: var(--kb-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--kb-ink);
    padding-top: 0;
}

.kb-creations-service__caption-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-creations-service__caption-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 14px;
    color: var(--kb-gold);
}

.kb-creations-service__caption-arrow svg {
    width: 24px;
    height: 12px;
    display: block;
}

/* Subtle Gold accent under the title — a thin horizontal line that
   mirrors the editorial "rule" used across the project. */
.kb-creations-service__accent {
    display: block;
    width: 36px;
    height: 1px;
    margin-top: 14px;
    background-color: var(--kb-gold);
    opacity: 0.6;
}

/* ----------------------------------------------------------------------------
   Tablet (768 – 1024) — 2 columns, slightly tighter spacing.
   ---------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {

    .kb-creations-service {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-creations-service__inner {
        gap: var(--kb-space-l);
    }

    .kb-creations-service__copy {
        max-width: 640px;
    }

    .kb-creations-service__title {
        font-size: 36px;
    }

    .kb-creations-service__description {
        font-size: 15px;
    }

    .kb-creations-service__grid,
    .kb-creations-service__grid--count-3plus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--kb-grid-gap-mobile);
        row-gap: var(--kb-space-l);
    }

    .kb-creations-service__grid--count-1,
    .kb-creations-service__grid--count-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kb-creations-service__grid--count-1 > .kb-creations-service__item,
    .kb-creations-service__grid--count-2 > .kb-creations-service__item {
        max-width: 420px;
        grid-column: auto;
    }
}

/* ----------------------------------------------------------------------------
   Mobile (≤ 767) — 1 column, 20px gutters, no horizontal overflow.
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .kb-creations-service {
        padding-top: var(--kb-section-space-mobile);
    }

    .kb-creations-service__inner {
        gap: var(--kb-space-l);
    }

    .kb-creations-service__copy {
        max-width: 100%;
    }

    .kb-creations-service__title {
        font-size: 30px;
    }

    .kb-creations-service__description {
        font-size: 14px;
    }

    .kb-creations-service__grid,
    .kb-creations-service__grid--count-1,
    .kb-creations-service__grid--count-2,
    .kb-creations-service__grid--count-3plus {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: var(--kb-space-l);
    }

    .kb-creations-service__grid--count-1 > .kb-creations-service__item,
    .kb-creations-service__grid--count-2 > .kb-creations-service__item {
        max-width: 100%;
        grid-column: auto;
    }
}