/*
 * Home page "Dining" block.
 *
 * The plugin widget vezaconslt-plugin/elementor/home_gastronomy.php points its
 * decorations at leclosdufil.com, the reference site. One of them,
 * icon-border-dotted.png, returns 404 there, so the dotted rules that separate
 * the two rows never appeared. The others still load, but hot-linking means the
 * whole block loses its decoration the day that site changes theme.
 *
 * Everything below re-points those backgrounds at copies stored in this theme
 * and restores the image sizing of the reference layout. It is scoped to the
 * widget, so it applies on every language without naming a single page.
 */

/* ---------------------------------------------------------------------------
 * BẢNG CHỈNH 2 ĐƯỜNG CHẤM giữa hàng Bar và hàng Restaurant.
 * Chỉ cần sửa các số dưới đây, không phải đụng phần CSS bên dưới.
 * Đơn vị rem: 1rem = 16px. Số càng lớn thì dịch càng nhiều.
 *
 * Số đo trên web gốc (đo ở khổ 1424px) để đối chiếu:
 *   đường TRÊN : 28 chấm, chạy từ x 570 đến x 1290
 *   đường DƯỚI : 34 chấm, chạy từ x 519 đến x 1262
 * ------------------------------------------------------------------------- */

.elementor-widget-vezaconslt_home_gastronomy {

    /* Độ dày (chiều cao) của cả hai đường chấm. */
    --dot-height: 1.3125rem;

    /* ĐƯỜNG TRÊN -------------------------------------------------------- */

    /* Đẩy xuống thấp bao nhiêu so với đáy hàng Bar.
       Tăng số = đường tụt xuống thấp hơn, gần hàng Restaurant hơn. */
    --dot-top-down: 3.7rem;

    /* Thụt vào bao nhiêu tính từ mép phải.
       Tăng số = đầu phải của đường ngắn lại, lùi sang trái. */
    --dot-top-right: -10px;

    /* ĐƯỜNG DƯỚI -------------------------------------------------------- */

    /* Khoảng cách giữa hai đường (tính từ mép trên đường trên).
       Tăng số = hai đường tách xa nhau hơn. */
    --dot-bottom-gap: 1.5rem;

    /* Thụt vào bao nhiêu tính từ mép trái.
       Tăng số = đầu trái ngắn lại, lùi sang phải. */
    --dot-bottom-left: 0rem;

    /* Thụt vào bao nhiêu tính từ mép phải.
       Tăng số = đầu phải ngắn lại, lùi sang trái.
       Đây là % bề ngang của dải (dải rộng đúng 2 cột), nên 52% khiến đường
       dưới dừng ở khe giữa hai ảnh hàng dưới, không chạy sang ảnh phòng ăn —
       giống web gốc (đường dưới của họ dừng ở x 894, ảnh bắt đầu ở x 912). */
    --dot-bottom-right: 52%;
}

.elementor-widget-vezaconslt_home_gastronomy [class*="icon-border-dotted"] {
    height: var(--dot-height);
    background-image: url("../images/home-gastronomy/dots.png");
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto var(--dot-height);
}

/*
 * This strip sits in the last column and is 200% wide anchored to its left, so
 * it ran off the right edge of the page. The reference site anchors the row
 * strip to the right instead (bg-row2-gas.png right top), which keeps it inside
 * the layout and over the two photo columns.
 */
.elementor-widget-vezaconslt_home_gastronomy .bottom-\[1\.25rem\][class*="icon-border-dotted"] {
    right: var(--dot-top-right);
    left: auto;
    /*
     * bottom-[1.25rem] puts it 20px above the foot of the row, which lands it
     * across the photo beside it. On the reference site this strip sits in the
     * gap between the two rows, so push it below the row instead.
     */
    bottom: calc(-1 * var(--dot-top-down));
    /*
     * The reference lays this strip down once, anchored right (746px wide), so
     * it starts at the left edge of the middle photo. Repeating it instead ran
     * the dots past the stitched vertical rule on the left.
     */
    background-repeat: no-repeat;
    background-position: right center;
    /*
     * Laid down once, so use the reference strip at its own 746px width rather
     * than the shortened tile that exists for repeating.
     */
    background-image: url("../images/home-gastronomy/bg-row2-gas.png");
}

/*
 * The reference site draws two parallel dotted rules in the gap between the two
 * rows. The widget's second strip is the one anchored to the top of the row-two
 * photo column, where overflow:hidden clips it to that column, so it can never
 * reach across. Hide it and draw the twin off the strip above instead.
 */
.elementor-widget-vezaconslt_home_gastronomy .top-0.w-\[200\%\][class*="icon-border-dotted"] {
    display: none;
}

.elementor-widget-vezaconslt_home_gastronomy .bottom-\[1\.25rem\][class*="icon-border-dotted"]::after {
    content: "";
    position: absolute;
    top: var(--dot-bottom-gap);
    /*
     * Measured off the reference: the lower rule runs from the stitched
     * vertical rule (x 519) to x 1262 and carries more dots than the rule
     * above it (34 against 28), so it tiles from the left edge rather than
     * being the single strip anchored right.
     */
    left: var(--dot-bottom-left);
    right: var(--dot-bottom-right);
    height: var(--dot-height);
    background-image: url("../images/home-gastronomy/dots.png");
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto var(--dot-height);
}

.elementor-widget-vezaconslt_home_gastronomy [class*="bg-gas.png"] {
    background-image: url("../images/home-gastronomy/bg-gas.png");
}

.elementor-widget-vezaconslt_home_gastronomy [class*="bg-row2-gas.png"] {
    background-image: url("../images/home-gastronomy/bg-row2-gas.png");
}

.elementor-widget-vezaconslt_home_gastronomy [class*="bg-special-tt.png"] {
    background-image: url("../images/home-gastronomy/bg-special-tt.png");
}

/* The widget writes this one as an inline style, so it needs the override. */
.elementor-widget-vezaconslt_home_gastronomy [class*="border-special.png"],
.elementor-widget-vezaconslt_home_gastronomy [style*="border-special.png"] {
    border-image: url("../images/home-gastronomy/border-special.png") 20 round !important;
}

/*
 * The reference layout gives both photos of a row the same height
 * (.block-image-gas img { height: 100% }), and pads the stitched middle column
 * on its sides only (.block-image-gas-1 { padding: 0 30px; border-left/right }).
 *
 * Here the middle column uses p-[1.25rem] and border-[1.25rem], which apply on
 * all four sides. That makes the column 80px taller than the photo it holds, so
 * the stretched photo beside it towered over the stitched one. Keep the stitched
 * side borders, drop the vertical ones.
 */
@media (min-width: 1024px) {

    /*
     * The reference row carries padding-top: 25px, which is the band the dotted
     * strip sits in: the strip is anchored to the top of its column, so without
     * that band it lands on the photo itself. Give every photo column the same
     * top band and no bottom one, which also keeps the columns equal in height.
     */
    .elementor-widget-vezaconslt_home_gastronomy .overflow-hidden.lg\:w-1\/3 {
        padding-top: 1.5625rem;
        padding-bottom: 0;
    }

    /*
     * Row two reverses direction on the reference site and drops the padding of
     * its photo column (.col-12:nth-of-type(2) .block-image-gas-0 { padding: 0 }),
     * which makes that photo wider than the one beside it. Here the same column
     * is the last child of its row; in row one the last child is the text.
     */
    .elementor-widget-vezaconslt_home_gastronomy .lg\:flex-row > .overflow-hidden:last-child {
        padding-right: 0;
        padding-left: 0.75rem;
    }

    .elementor-widget-vezaconslt_home_gastronomy .p-\[1\.25rem\] {
        padding-right: 1.875rem;
        padding-left: 1.875rem;
        border-top-width: 0;
        border-bottom-width: 0;
    }

    .elementor-widget-vezaconslt_home_gastronomy .lg\:w-1\/3 > img {
        height: 100%;
        align-self: stretch;
    }
}