/* ── Standalone image block ── */
.content-block-image {
    margin: 0;
}

.content-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* size — applied to the figure so margin:auto alignment works */
.content-block-image--small  { width: 25%; }
.content-block-image--medium { width: 50%; }
.content-block-image--large  { width: 75%; }
.content-block-image--full   { width: 100%; }

/* alignment */
.content-block-image--left   { margin-right: auto; }
.content-block-image--center { margin-left: auto; margin-right: auto; }
.content-block-image--right  { margin-left: auto; }

.content-block-image figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: var(--gray-dark);
    text-align: center;
}

/* ── Image + text block ── */
.content-block-image-text {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.content-block-image-text--right {
    flex-direction: row-reverse;
}

.content-block-image-text__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.content-block-image-text__text {
    flex: 1;
}

/* image width variants */
.content-block-image-text--img-one-third  .content-block-image-text__image { flex: 0 0 33.333%; }
.content-block-image-text--img-half       .content-block-image-text__image { flex: 0 0 50%; }
.content-block-image-text--img-two-thirds .content-block-image-text__image { flex: 0 0 66.666%; }

@media (max-width: 768px) {
    .content-block-image--small,
    .content-block-image--medium,
    .content-block-image--large {
        width: 100%;
    }

    .content-block-image-text,
    .content-block-image-text--right {
        flex-direction: column;
    }

    .content-block-image-text--img-one-third  .content-block-image-text__image,
    .content-block-image-text--img-half       .content-block-image-text__image,
    .content-block-image-text--img-two-thirds .content-block-image-text__image {
        flex: unset;
        width: 100%;
    }
}

/* ── Tiles block ── */
.tiles-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tiles-block--cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.tiles-block--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.tiles-block--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ── Glass tile ── */
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 18px;
    background: var(--gray);
    border: 1px solid #e1e2ea;
    box-shadow: 0 8px 32px rgba(20, 19, 23, 0.1);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(20, 19, 23, 0.12);
}

.tile__icon {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    object-fit: contain;
}

.tile__title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 8px;
}

.tile__text {
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-dark);
    margin: 0;
}

/* rich text inside a tile: neutralise default <p> margins, keep paragraphs spaced */
.tile__text p {
    margin: 0;
}

.tile__text p + p {
    margin-top: 8px;
}

/* link colour follows project convention (.description a / .article a) */
.tile__text a {
    color: var(--blue);
}

.tile--dark .tile__text a {
    color: #fff;
}

/* image under the text — pushed to the bottom so images in a row line up */
.tile__media {
    margin-top: auto;
    padding-top: 16px;
}

.tile__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

/* single tile per row: keep the image from taking the whole screen */
.tiles-block--cols-1 .tile__image {
    max-height: 400px;
}

/* tile style variants — glass tint / heading / text colors */
/* "light" tile — solid gray surface + visible hairline so it reads as a card on white */
.tile--light {
    background: var(--gray);
    border-color: #e1e2ea;
}
.tile--light .tile__title { color: var(--black); }
.tile--light .tile__text { color: var(--gray-dark); }

/* "dark" tile — graphite/slate glass instead of flat black */
.tile--dark {
    background: rgba(46, 49, 61, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(20, 19, 23, 0.25);
}
.tile--dark .tile__title { color: #fff; }
.tile--dark .tile__text { color: #c7cad3; }

.tile--red {
    background: rgba(232, 44, 44, 0.14);
    border-color: rgba(232, 44, 44, 0.28);
}
.tile--red .tile__title { color: var(--red); }
.tile--red .tile__text { color: var(--black); }

.tile--blue {
    background: rgba(39, 55, 225, 0.12);
    border-color: rgba(39, 55, 225, 0.26);
}
.tile--blue .tile__title { color: var(--blue); }
.tile--blue .tile__text { color: var(--black); }

.tile--yellow {
    background: rgba(255, 214, 0, 0.18);
    border-color: rgba(255, 214, 0, 0.32);
}
.tile--yellow .tile__title { color: #a67c00; }
.tile--yellow .tile__text { color: var(--black); }

@media (max-width: 768px) {
    .tiles-block,
    .tiles-block--cols-1,
    .tiles-block--cols-2,
    .tiles-block--cols-3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
}

/* ── Stream wrapper spacing ── */
.content-stream > * + * {
    margin-top: 56px;
}

/* ── Rich text block ── */
.rich-text a {
    color: var(--blue);
}

.rich-text ul {
    list-style-type: disc;
    padding-inline-start: 30px;
    list-style-position: inside;
}