/* Services grid (artkb.cz home page) - sections/services_grid_section.php.
   Same visual language as the artkb.net home page: dotted background row,
   Helvetica 55 Roman for big text, photo tiles with a slight zoom on hover. */

.services_grid_section .sg-row { max-width: 1402px; padding: 15px 20px 15px; margin: 0; }
.services_grid_section .sg-grid { display: grid; width: 100%; gap: 30px; padding: 0 15px; }

.services_grid_section .sg-tile { display: flex; flex-direction: column; color: #1a1a1a; text-decoration: none; min-width: 0; order: var(--sg-m); }
.services_grid_section .sg-tile:hover { color: #1a1a1a; text-decoration: none; }

/* text tile */
.services_grid_section .sg-text { container-type: inline-size; justify-content: space-between; }
.services_grid_section h2.sg-name { font-family: 'Helvetica 55 Roman', sans-serif; font-weight: normal; margin: 0; letter-spacing: -1px; }
.services_grid_section .sg-more { font-size: 28px; line-height: 1; transition: transform .3s; align-self: flex-start; }
.services_grid_section a.sg-text:hover .sg-more { transform: translateX(8px); }

/* photo tile */
.services_grid_section .sg-img { overflow: hidden; width: 100%; }
.services_grid_section .sg-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.services_grid_section a.sg-photo:hover .sg-img img,
.services_grid_section a.sg-text:hover + a.sg-photo .sg-img img { transform: scale(1.05); }
.services_grid_section .g-pr-descript { padding: 12px 0 0; }

/* optional looping video over the photo; it fades in once it really plays */
.services_grid_section .sg-img { position: relative; }
.services_grid_section .sg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; pointer-events: none; }
.services_grid_section .sg-video.is-playing { opacity: 1; }

/* wide call-to-action tile */
.services_grid_section .sg-cta { background: #1a1a1a; color: #f2f2f2; padding: 24px 28px; }
.services_grid_section .sg-cta:hover { color: #f2f2f2; }

/* ---------- layout "quarter": square tiles, checkerboard ---------- */
.sg-layout-quarter .sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sg-layout-quarter .sg-text { aspect-ratio: 1 / 1; }
.sg-layout-quarter .sg-img { aspect-ratio: 1 / 1; }
.sg-layout-quarter h2.sg-name { font-size: 17cqi; line-height: 1.08; }
.sg-layout-quarter .sg-wide { grid-column: span 2; aspect-ratio: auto; min-height: 120px; }
.sg-layout-quarter .sg-wide h2.sg-name { font-size: 8.5cqi; }

@media screen and (min-width: 992px) {
    .sg-layout-quarter .sg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
    .sg-layout-quarter .sg-tile { order: var(--sg-d); }
    .sg-layout-quarter .sg-wide { aspect-ratio: 2 / 1; padding: 6px 0; }
    .sg-layout-quarter .sg-wide.sg-cta { aspect-ratio: auto; padding: 28px 32px; }
}

/* wide photo tile (two cells) */
.sg-layout-quarter .sg-photo.sg-wide { min-height: 0; aspect-ratio: auto; padding: 0; }
.sg-layout-quarter .sg-photo.sg-wide .sg-img { aspect-ratio: 2 / 1; height: 100%; }
@media screen and (min-width: 992px) {
    /* the row height comes from the square tiles, the picture only fills it */
    .sg-layout-quarter .sg-photo.sg-wide { position: relative; }
    .sg-layout-quarter .sg-photo.sg-wide .sg-img { aspect-ratio: auto; position: absolute; inset: 0; height: auto; }
}

/* ---------- layout "half": one service per row ---------- */
.sg-layout-half .sg-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sg-layout-half h2.sg-name { font-size: 13cqi; line-height: 1.05; letter-spacing: -2px; }
.sg-layout-half .sg-text { padding: 10px 0 0; gap: 14px; }
.sg-layout-half .sg-img { height: 300px; }
.sg-layout-half .sg-photo { margin-bottom: 20px; }
.sg-layout-half .sg-wide { margin-bottom: 0; }
.sg-layout-half .sg-wide h2.sg-name { font-size: 9cqi; }

@media screen and (min-width: 768px) {
    .sg-layout-half .sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 60px; }
    .sg-layout-half .sg-tile { order: var(--sg-d); }
    .sg-layout-half .sg-text { justify-content: center; gap: 24px; padding: 0; }
    .sg-layout-half .sg-img { height: 440px; }
    .sg-layout-half .sg-photo { margin-bottom: 0; }
    .sg-layout-half .sg-wide { grid-column: span 2; }
    .sg-layout-half .sg-wide h2.sg-name { font-size: 6cqi; }
}

/* service on artkb.net: arrow up-right + site name (cz, 2026-10-05) */
.services_grid_section .sg-more-ext { display: inline-flex; align-items: baseline; gap: 8px; }
.services_grid_section .sg-more-ext .sg-ext-host { font-size: 16px; letter-spacing: 0; }
.services_grid_section a.sg-text:hover .sg-more-ext { transform: translate(4px, -4px); }