/* ==========================================================================
   Bartenders — верх картки коктейлю, мобільна (хендофф 2d).

   Розмітка — обгортки в шаблоні WPRM chic-bartenders, порядок десктопний:
     .brt-rt-top
       .brt-rt-title    > h1.wprm-recipe-name (+ .ba-recipe-fav-btn від account)
       .wprm-spacer, p.wprm-recipe-updated
       .brt-rt-rating   > style, svg-defs, .wprm-recipe-rating (+ .brtrn-hint)
       .wprm-spacer
       .brt-rt-facts    > факти WPRM (скільки є)
       .brt-rt-iba      (meta-container IBA; клас WPRM дублює і на внутрішній span)
       .wprm-spacer, .wprm-icon-shortcode, .wprm-spacer
       .image-flex      > .wprm-recipe-image, .wprm-recipe-summary

   На мобільному .brt-rt-top — flex-колонка, .image-flex розчиняється
   (display: contents), блоки переставляє order. «Картка» (фото → факти → IBA) —
   не обгортка, а спільна рамка з бордерів трьох сусідів: на десктопі фото й
   опис лежать в одному рядку .image-flex, і фото з нього не винести.

   Цей файл друкується раніше за інлайн-стиль шаблону WPRM, тож кожен
   селектор тут не слабший за (0,2,0); !important — лише проти !important
   шаблону/WPRM та інлайн-стилів шорткодів.
   ========================================================================== */

@media screen and (max-width: 767px) {   /* screen: друк сторінки (~718px на A4) лишається десктопним */

  /* ---------- Поля: верх на 16px від країв і 8px під крихтами, решта рецепта не зсувається ----------
     Сторінки двох будов, у .wprm-recipe в обох overflow: hidden:
     а) пост зібрано в Elementor, рецепт — віджет WPRM: три вкладені паддінги
        (5 + 10 + 10 = 25px). Віджет розсуваємо на 9px, ті самі 9px повертаємо
        паддінгом .wprm-recipe (контент «Склад» і нижче не зсувається), а
        .brt-rt-top виходить у цей паддінг негативним марджином — усередині
        padding-box його overflow не ріже;
     б) у тексті поста лише шорткод [wprm-recipe] (імпортовані картки): рецепт
        лежить просто в колонці шаблону #403 — 15px від краю й 0px під крихтами.
        Паддінгу для виходу нема (негативний марджин тут різав H1 і картку),
        тож .brt-rt-top лише відступає на 1px і 8px.
     Інша будова лишається без марджинів: поля трохи інші, але нічого не ріжеться. */
  .brt-rt-page .elementor-widget-theme-post-content .elementor-widget-wprm-recipe {
    width: calc(100% + 18px);      /* віджет у flex-обгортці Elementor має width: 100% */
    max-width: none;
    margin: -2px -9px 0;           /* -2px: 8px від крихт до H1 = 10px паддінгу колонки − 2 */
  }
  .brt-rt-page .elementor-widget-wprm-recipe .wprm-recipe {
    padding-left: 9px;
    padding-right: 9px;
  }
  .brt-rt-page .elementor-widget-theme-post-content .brt-rt-top {
    margin: 8px 1px 0;             /* б) */
  }
  .brt-rt-page .elementor-widget-theme-post-content .elementor-widget-wprm-recipe .brt-rt-top {
    margin: 0 -9px;                /* а) */
  }

  /* ---------- Хлібні крихти: один рядок, свайп, ліворуч ---------- */
  .brt-rt-page .elementor-widget-breadcrumbs {
    margin-bottom: 0;
    text-align: left;
  }
  /* 10px від шапки дає паддінг секції Elementor; паддінг колонки (10px) знімаємо. */
  .brt-rt-page .elementor-widget-breadcrumbs #breadcrumbs {
    margin: -10px -15px 0;         /* скрол від краю до краю екрана */
    padding: 0 16px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    line-height: 1.4;
  }
  .brt-rt-page .elementor-widget-breadcrumbs #breadcrumbs::-webkit-scrollbar {
    display: none;
  }
  .brt-rt-page .elementor-widget-breadcrumbs #breadcrumbs a {
    color: #1b9ae4;
  }

  /* ---------- Верх: колонка з перестановкою ---------- */
  .brt-rt-page .brt-rt-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    font-family: 'Nunito', sans-serif;
  }
  .brt-rt-page .brt-rt-top > * {
    order: 8;                      /* невідомий блок, доданий у шаблон, — після опису */
  }
  .brt-rt-page .brt-rt-top > .image-flex {
    display: contents;
  }
  .brt-rt-page .brt-rt-top > .wprm-spacer,
  .brt-rt-page .brt-rt-top > .wprm-icon-shortcode {
    display: none !important;      /* .wprm-spacer у WPRM — display: block !important */
  }

  .brt-rt-page .brt-rt-top > .brt-rt-title                   { order: 1; }
  .brt-rt-page .brt-rt-top > .brt-rt-rating                  { order: 2; }
  .brt-rt-page .brt-rt-top > .image-flex > .wprm-recipe-image { order: 3; }
  .brt-rt-page .brt-rt-top > .brt-rt-facts                   { order: 4; }
  .brt-rt-page .brt-rt-top > .brt-rt-iba                     { order: 5; }
  .brt-rt-page .brt-rt-top > .wprm-recipe-updated            { order: 6; }
  .brt-rt-page .brt-rt-top > .image-flex > .wprm-recipe-summary { order: 7; }

  /* ---------- H1 + «В обране» ----------
     Колонка 44px під серце є ще до того, як favorites.js його вставить:
     H1 одразу переноситься по фінальній ширині, без зсуву після завантаження. */
  .brt-rt-page .brt-rt-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    column-gap: 12px;
    align-items: start;
  }
  .brt-rt-page .brt-rt-title .wprm-recipe-name {
    grid-column: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Nunito', sans-serif;
    font-size: 24px;
    font-weight: 600 !important;   /* .wprm-block-text-bold — 700 !important */
    line-height: 1.25;
    letter-spacing: 0;
    color: #222222;
    text-align: left;
    text-wrap: pretty;
  }
  .brt-rt-page .brt-rt-title .ba-recipe-fav-btn {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1.5px solid #cfd6da;
    border-radius: 12px;
    box-shadow: none;
    color: #16313f;
  }
  /* Astra фарбує button:hover/:focus у свій синій — повертаємо своє. */
  .brt-rt-page .brt-rt-title .ba-recipe-fav-btn:hover,
  .brt-rt-page .brt-rt-title .ba-recipe-fav-btn:focus,
  .brt-rt-page .brt-rt-title .ba-recipe-fav-btn:active {
    background: #f4f6f7;
    color: #16313f;
  }
  .brt-rt-page .brt-rt-title .ba-recipe-fav-btn:focus-visible {
    outline: 2px solid #1b9ae4;
    outline-offset: 2px;
  }
  .brt-rt-page .brt-rt-title .ba-recipe-fav-icon svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  /* «В обране / В обраному» лишається доступним імʼям кнопки. */
  .brt-rt-page .brt-rt-title .ba-recipe-fav-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---------- Рейтинг: зірки + «5 (9 оцінок)» + підпис праворуч ---------- */
  .brt-rt-page .brt-rt-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    margin: 8px 0 0;
  }
  .brt-rt-page .brt-rt-rating > svg {
    position: absolute;            /* defs градієнтів півзірок: з потоку, але не display:none */
  }
  .brt-rt-page .brt-rt-rating .wprm-recipe-rating {
    display: flex;
    align-items: center;
    margin: 0;
    justify-content: flex-start;   /* шаблон центрує рейтинг до 640px */
  }
  .brt-rt-page .brt-rt-rating .wprm-rating-star {
    display: inline-flex;
    font-size: 17px !important;    /* інлайн-стиль шорткоду: font-size 1.2em, padding 3px */
    padding: 0 !important;
    line-height: 0;
  }
  .brt-rt-page .brt-rt-rating .wprm-rating-star + .wprm-rating-star {
    margin-left: 1px;
  }
  .brt-rt-page .brt-rt-rating .wprm-rating-star svg {
    width: 17px;
    height: 17px;
    margin: 0 !important;
  }
  /* Зірки — теж flex-елементи, тож відступ до «5 (9 оцінок)» — марджином, не gap. */
  .brt-rt-page .brt-rt-rating .wprm-recipe-rating-details {
    margin: 0 0 0 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: #222222;
    white-space: nowrap;
  }
  .brt-rt-page .brt-rt-rating .brtrn-label { display: none; }
  .brt-rt-page .brt-rt-rating .wprm-recipe-rating-average { font-weight: 700; }
  .brt-rt-page .brt-rt-rating .brtrn-count { color: #777777; }
  .brt-rt-page .brt-rt-rating .brtrn-hint {
    margin: 0 0 0 auto;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    text-align: right;
  }
  .brt-rt-page .brt-rt-rating .brtrn-hint-full  { display: none; }
  .brt-rt-page .brt-rt-rating .brtrn-hint-short { display: inline; }

  /* ---------- Картка: фото → факти → IBA ----------
     Спільна рамка 1px #ebe6dc з радіусом 14; кожен шматок малює свою частину.
     Ширина — не більше 440px (як картка в десктопному ескізі хендоффа): на
     телефонах до 472px це вся ширина, а на 600–767px фото 300×375 інакше
     розтягувалося б утричі. */
  .brt-rt-page .brt-rt-top .wprm-recipe-image,
  .brt-rt-page .brt-rt-top > .brt-rt-facts,
  .brt-rt-page .brt-rt-top > .brt-rt-iba {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
  }
  .brt-rt-page .brt-rt-top .wprm-recipe-image {
    flex: none;                    /* .image-flex дає йому flex-basis 32% */
    margin: 12px 0 0 !important;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    border: 1px solid #ebe6dc;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
  }
  .brt-rt-page .brt-rt-top .wprm-recipe-image img {
    display: block;
    width: 100% !important;
    max-width: none;
    height: auto;
    aspect-ratio: 358 / 380;       /* на 390-екрані — 358×380 */
    object-fit: cover;
    object-position: center;
    margin: 0;
    border-radius: 0 !important;   /* інлайн-стиль шорткоду: 8px */
    box-shadow: none;
  }

  /* Факти: скільки є, стільки й клітинок. Лінії між клітинками — фон сітки
     у проміжку 1px, тож вони правильні за будь-якої розкладки. */
  .brt-rt-page .brt-rt-top > .brt-rt-facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1px;
    margin: 0;
    background: #ebe6dc;
    border: 1px solid #ebe6dc;
    border-top: 0;                 /* межу з фото дає саме фото */
    border-radius: 0 0 14px 14px;
    overflow: hidden;
  }
  .brt-rt-page .brt-rt-top > .brt-rt-facts:has(+ .brt-rt-iba) {
    border-bottom: 0;
    border-radius: 0;
  }
  .brt-rt-page .brt-rt-top > .brt-rt-facts:not(:has(> *)) {
    display: none;
  }
  /* 4 факти — 2×2; 5 і більше — по 3 в ряд, остання клітинка дотягується до краю. */
  .brt-rt-page .brt-rt-top > .brt-rt-facts:has(> :nth-child(4):last-child) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brt-rt-page .brt-rt-top > .brt-rt-facts:has(> :nth-child(5)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .brt-rt-page .brt-rt-top > .brt-rt-facts:has(> :nth-child(5)) > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .brt-rt-page .brt-rt-top > .brt-rt-facts:has(> :nth-child(5)) > :last-child:nth-child(3n + 2) { grid-column: span 2; }

  /* Клітинка — прямий нащадок (meta-container або голий block-container). */
  .brt-rt-page .brt-rt-top > .brt-rt-facts > * {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 10px 4px;
    background: #ffffff;
  }
  /* Сітка 2×2 всередині клітинки. У калорій block-container сам і є клітинкою
     (без meta-container), тож паддінг клітинки тут не скидаємо, а вміст
     центруємо й по вертикалі — клітинка тягнеться до висоти ряду. */
  .brt-rt-page .brt-rt-facts .wprm-recipe-block-container {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
    margin: 0 !important;
    text-align: center;
    font-family: 'Nunito', sans-serif;
  }
  .brt-rt-page .brt-rt-facts .wprm-recipe-block-container > .wprm-recipe-icon {
    grid-column: 1;
    grid-row: 1;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    line-height: 0;
  }
  .brt-rt-page .brt-rt-facts .wprm-recipe-icon img,
  .brt-rt-page .brt-rt-facts .wprm-recipe-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    max-width: none;
    margin: 0;
    padding: 0;
    filter: none;                  /* шаблон сірить іконки; у макеті — рідний колір SVG */
  }
  /* Значення — усе, що не іконка, не лейбл і не підпис. */
  .brt-rt-page .brt-rt-facts .wprm-recipe-block-container > :not(.wprm-recipe-icon):not(.wprm-recipe-details-label):not(.wprm-screen-reader-text):not(.brt-rt-fact__caption) {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #222222;
    white-space: nowrap;
  }
  /* Внутрішні span-и значення (у калорій — число й одиниця) мають від WPRM
     власний font-weight: 400. */
  .brt-rt-page .brt-rt-facts .wprm-recipe-block-container > * > * {
    font-weight: inherit;
  }
  /* Повний лейбл («Час приготування:») — для скрінрідерів, на екрані його
     заміняє короткий підпис. */
  .brt-rt-page .brt-rt-facts .wprm-recipe-details-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .brt-rt-page .brt-rt-facts .brt-rt-fact__caption {
    display: block;                /* перебиває [hidden] */
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
    color: #777777;
  }
  /* «165 ккал» → «165» + підпис «ккал». */
  .brt-rt-page .brt-rt-facts .wprm-recipe-calories-container .wprm-recipe-details-unit {
    display: none;
  }

  /* IBA — підвал картки. */
  .brt-rt-page .brt-rt-top > .brt-rt-iba {
    display: block;
    margin: 0;
    padding: 0;
    background: #f3f9fd;
    border: 1px solid #ebe6dc;
    border-top-color: #e3f1fb;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
  }
  .brt-rt-page .brt-rt-top > .brt-rt-iba .wprm-recipe-iba-container {
    display: block;
    margin: 0;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    line-height: 1.35;
    color: #222222;
    text-align: center;
  }
  .brt-rt-page .brt-rt-top > .brt-rt-iba .wprm-recipe-iba-container::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .brt-rt-page .brt-rt-top > .brt-rt-iba .wprm-recipe-icon {
    display: none;                 /* десктопна іконка-чекбокс */
  }
  .brt-rt-page .brt-rt-top > .brt-rt-iba b,
  .brt-rt-page .brt-rt-top > .brt-rt-iba strong {
    font-weight: 700;
  }

  /* Крайні випадки картки. Без фото перший шматок бере верхню рамку. */
  .brt-rt-page .brt-rt-top:not(:has(.wprm-recipe-image)) > .brt-rt-facts,
  .brt-rt-page .brt-rt-top:not(:has(.wprm-recipe-image)):not(:has(> .brt-rt-facts > *)) > .brt-rt-iba {
    margin-top: 12px;
    border-top: 1px solid #ebe6dc;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }
  /* Лише фото — рамка замкнена на ньому. */
  .brt-rt-page .brt-rt-top:not(:has(> .brt-rt-facts > *)):not(:has(> .brt-rt-iba)) .wprm-recipe-image {
    border-bottom: 1px solid #ebe6dc;
    border-radius: 14px;
  }

  /* ---------- «Оновлено» і опис ---------- */
  .brt-rt-page .brt-rt-top > .wprm-recipe-updated {
    margin: 8px 0 0 !important;
    font-family: 'Nunito', sans-serif;
    font-size: 12px !important;    /* шаблон: p { font-size/line-height !important } */
    line-height: 1.4 !important;
    letter-spacing: 0;
    color: #888888;
    text-align: left;
  }
  .brt-rt-page .brt-rt-top .wprm-recipe-summary {
    display: block;
    flex: none;
    margin: 12px 0 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #222222;
    text-align: left;
  }
}