/* =========================================
   80-services-title.css
   Vertical "Meie teenused" label to the left of services carousel (desktop)
   Works with your Gutenberg structure:
   .hdr-sticky-wrap contains:
     - .hdr-navrow.is-content-justification-left  (title row)
     - a group that contains .wp-svc-carousel     (carousel)
   Recommended: set variables in 00-vars.css:
     --svc-label-rail, --svc-label-gap, --svc-label-size,
     --svc-label-weight, --svc-label-letter
   ========================================= */

/* Desktop only */
@media (min-width:1141px){

  /* Make sticky header area a 2-column grid:
     col-1 = vertical label rail
     col-2 = carousel/content */
  .hdr-sticky-wrap{
    display: grid !important;
    grid-template-columns: var(--svc-label-rail, 34px) 1fr;
    column-gap: var(--svc-label-gap, 10px);
    align-items: center;
  }

  /* Default: keep all direct children full-width (same layout as before) */
  .hdr-sticky-wrap > *{
    grid-column: 1 / -1;
    min-width: 0;
  }

  /* Title row goes to column 1 */
  .hdr-sticky-wrap > .hdr-navrow.is-content-justification-left{
    grid-column: 1;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Carousel container goes to column 2
     Primary selector: group that contains .wp-svc-carousel */
  .hdr-sticky-wrap > .wp-block-group:has(.wp-svc-carousel){
    grid-column: 2;
    margin: 0 !important;
    min-width: 0 !important;
  }

  /* Fallback (optional):
     If you add class "hdr-svc-carousel" to the carousel group in Gutenberg,
     it will always work even without :has support. */
  .hdr-sticky-wrap > .hdr-svc-carousel{
    grid-column: 2;
    margin: 0 !important;
    min-width: 0 !important;
  }

  /* Vertical label styling */
  .hdr-services-title{
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;

    font-size: var(--svc-label-size, 14px);
    font-weight: var(--svc-label-weight, 800);
    letter-spacing: var(--svc-label-letter, 0.04em);
    line-height: 1;

    /* Vertical text, reading bottom->top (counter-clockwise) */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transform-origin: center;
  }
}

/* Mobile/Tablet: keep normal horizontal title */
@media (max-width:1140px){
  .hdr-services-title{
    writing-mode: horizontal-tb;
    transform: none;
  }
}