/* -----------------------------------------*/
/* TEXT UTILITIES */

.text-accent { color: var(--wp--preset--color--accent-1); }
.text-balance, .text-balance * { text-wrap: balance; }
.text-pretty, .text-pretty * { text-wrap: pretty; }

/* -----------------------------------------*/
/* ASPECT RATIO UTILITIES */

.aspect { overflow: hidden; }

.aspect .wp-block-image img,
.aspect img,
.aspect video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-9-16 { aspect-ratio: 9 / 16; }
.ratio-21-9 { aspect-ratio: 21 / 9; }
.ratio-2-1 { aspect-ratio: 2 / 1; }
.ratio-1-2 { aspect-ratio: 1 / 2; }

.wp-block-group.aspect.ratio-1-1 { flex-wrap: wrap !important; }

/* -----------------------------------------*/
/* FLEX DIRECTION UTILITIES */

/* Desktop */
.col { flex-direction: column !important; }
.col-rev { flex-direction: column-reverse !important; }
.row { flex-direction: row !important; }
.row-rev { flex-direction: row-reverse !important; }

/* Tablet */
@media (max-width: 1024px) {
  .tab-col { flex-direction: column !important; }
  .tab-col-rev { flex-direction: column-reverse !important; }
  .tab-row { flex-direction: row !important; }
  .tab-row-rev { flex-direction: row-reverse !important; }
  .tab-width-full { width: 100% !important; }
  .tab-width-stretch { width: stretch !important; }
}

/* Mobile */
@media (max-width: 767px) {
  .mob-col { flex-direction: column !important; }
  .mob-col-rev { flex-direction: column-reverse !important; }
  .mob-row { flex-direction: row !important; }
  .mob-row-rev { flex-direction: row-reverse !important; }
  .mob-width-full { width: 100% !important; }
  .mob-width-stretch { width: stretch !important; }
}

/* -----------------------------------------*/
/* LINK DECORATION */

.deco-none a,
.deco-semi a,
.deco-hover a {
  text-decoration: none !important;
}
.deco-none a:hover {
  text-decoration: none !important;
}
.deco-semi a:hover {
  text-decoration: none !important;
  opacity: 0.75 !important;
}
.deco-hover a:hover {
  text-decoration: underline !important;
}

/* =========================================================
   GRADIENT MASK — SHARED SETTINGS
   ========================================================= */

.gradient-mask {
    --mask-color: var(--wp--preset--color--base);
    --mask-fade: color-mix(
        in srgb,
        var(--mask-color) 35%,
        transparent
    );
    --mask-fade-thick: color-mix(
        in srgb,
        var(--mask-color) 45%,
        transparent
    );
}

/* Bright / default */
.gradient-mask.bright {
    --mask-color: var(--wp--preset--color--base);
}

/* Pale gray */
.gradient-mask.gray {
    --mask-color: var(--wp--preset--color--custom-pale-gray);
}

/* Dark */
.gradient-mask.dark {
    --mask-color: var(--wp--preset--color--contrast);
}


/* =========================================================
   ENABLE OVERLAY
   ========================================================= */

.gradient-mask.enable .wp-block-cover__background {
    opacity: 1 !important;
}


/* =========================================================
   DESKTOP MASKS
   ========================================================= */

.gradient-mask.mask-top .wp-block-cover__background {
    background: linear-gradient(
        180deg,
        var(--mask-color) 12%,
        var(--mask-fade)
    ) !important;
}

.gradient-mask.mask-right .wp-block-cover__background {
    background: linear-gradient(
        270deg,
        var(--mask-color) 35%,
        var(--mask-fade)
    ) !important;
}

.gradient-mask.mask-bottom .wp-block-cover__background {
    background: linear-gradient(
        0deg,
        var(--mask-color) 12%,
        var(--mask-fade)
    ) !important;
}

.gradient-mask.mask-left .wp-block-cover__background {
    background: linear-gradient(
        90deg,
        var(--mask-color) 35%,
        var(--mask-fade)
    ) !important;
}

.gradient-mask.mask-all .wp-block-cover__background {
    background: color-mix(
        in srgb,
        var(--mask-color) 80%,
        transparent
    ) !important;
}


/* =========================================================
   MOBILE MASKS
   ========================================================= */

@media (max-width: 768px) {

    .gradient-mask.mask-mob-top .wp-block-cover__background {
        background: linear-gradient(
            180deg,
            var(--mask-color) 12%,
            var(--mask-fade)
        ) !important;
    }

    .gradient-mask.mask-mob-right .wp-block-cover__background {
        background: linear-gradient(
            270deg,
            var(--mask-color) 35%,
            var(--mask-fade)
        ) !important;
    }

    .gradient-mask.mask-mob-bottom .wp-block-cover__background {
        background: linear-gradient(
            0deg,
            var(--mask-color) 12%,
            var(--mask-fade)
        ) !important;
    }

    .gradient-mask.mask-mob-left .wp-block-cover__background {
        background: linear-gradient(
            90deg,
            var(--mask-color) 35%,
            var(--mask-fade)
        ) !important;
    }

    .gradient-mask.mask-mob-all .wp-block-cover__background {
        background: color-mix(
            in srgb,
            var(--mask-color) 80%,
            transparent
        ) !important;
    }
}

/* =========================================================
   SOFT MASKS (TRANSPARENT → 35%)
   ========================================================= */

.gradient-mask.soft-top .wp-block-cover__background {
    background: linear-gradient(
        180deg,
        transparent,
        var(--mask-fade-thick)
    ) !important;
}

.gradient-mask.soft-right .wp-block-cover__background {
    background: linear-gradient(
        270deg,
        transparent,
        var(--mask-fade-thick)
    ) !important;
}

.gradient-mask.soft-bottom .wp-block-cover__background {
    background: linear-gradient(
        0deg,
        transparent,
        var(--mask-fade-thick)
    ) !important;
}

.gradient-mask.soft-left .wp-block-cover__background {
    background: linear-gradient(
        90deg,
        transparent,
        var(--mask-fade-thick)
    ) !important;
}

.gradient-mask.soft-all .wp-block-cover__background {
    background: color-mix(
        in srgb,
        var(--mask-color) 35%,
        transparent
    ) !important;
}

/* =========================================================
   MOBILE SOFT MASKS
   ========================================================= */

@media (max-width: 768px) {

    .gradient-mask.soft-mob-top .wp-block-cover__background {
        background: linear-gradient(
            180deg,
            transparent,
            var(--mask-fade-thick)
        ) !important;
    }

    .gradient-mask.soft-mob-right .wp-block-cover__background {
        background: linear-gradient(
            270deg,
            transparent,
            var(--mask-fade-thick)
        ) !important;
    }

    .gradient-mask.soft-mob-bottom .wp-block-cover__background {
        background: linear-gradient(
            0deg,
            transparent,
            var(--mask-fade-thick)
        ) !important;
    }

    .gradient-mask.soft-mob-left .wp-block-cover__background {
        background: linear-gradient(
            90deg,
            transparent,
            var(--mask-fade-thick)
        ) !important;
    }

    .gradient-mask.soft-mob-all .wp-block-cover__background {
        background: color-mix(
            in srgb,
            var(--mask-color) 35%,
            transparent
        ) !important;
    }
}

/* -----------------------------------------*/
/* LINK ARROW */

.with-arrow:has(a) a,
a.with-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.with-arrow:has(a) a:after,
a.with-arrow::after {
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.with-arrow:has(a):hover  a::after,
a.with-arrow:hover::after {
  transform: translateX(2px) rotate(45deg);
}

/* RTL */
html[dir="rtl"] .with-arrow:has(a) a::after,
html[dir="rtl"] a.with-arrow::after {
  transform: rotate(-135deg);
}

html[dir="rtl"] .with-arrow:has(a):hover a::after,
html[dir="rtl"] a.with-arrow:hover::after {
  transform: translateX(-2px) rotate(-135deg);
}

/* ----------------------------------------- */
/* External Link                             */
/* ----------------------------------------- */

.rlg-external-link {
    display: inline-flex;
    gap: 0.4em;
    align-items: center;
    width: fit-content;
    color: inherit;
    text-decoration: none;
}

.rlg-external-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rlg-external-link__icon {
    display: block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

.rlg-external-link:hover .rlg-external-link__icon {
    transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .rlg-external-link__icon {
        transition: none;
    }
}

/* ----------------------------------------- */
/* Video Block                               */
/* ----------------------------------------- */

.rlg-featured-video {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: #1e1e1e;
    aspect-ratio: 16 / 9;
}

.rlg-featured-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.rlg-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;

    display: grid;
    place-items: center;

    width: 5rem;
    height: 5rem;
    padding: 0;

    color: var(--wp--preset--color--base);
    background: rgb(from var(--wp--preset--color--base) r g b / 0.12);

    border: 1px solid rgb(from var(--wp--preset--color--base) r g b / 0.28);
    border-radius: 999px;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 .5rem 2rem rgb(0 0 0 / .18),
        inset 0 1px 1px rgb(255 255 255 / .18);

    cursor: pointer;

    transform: translate(-50%, -50%);
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        opacity .25s ease,
        box-shadow .25s ease;
}

.rlg-video-play svg {
    width: 1.75rem;
    height: 1.75rem;

    margin-left: .18rem;

    fill: currentColor;
}

.rlg-featured-video:hover .rlg-video-play {
    background: rgb(from var(--wp--preset--color--base) r g b / 0.18);
    border-color: rgb(from var(--wp--preset--color--base) r g b / .4);

    transform: translate(-50%, -50%) scale(1.08);

    box-shadow:
        0 .75rem 2.5rem rgb(0 0 0 / .24),
        inset 0 1px 1px rgb(255 255 255 / .25);
}

.rlg-featured-video.is-playing .rlg-video-play {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.award-mob {
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.award-mob li {
    width: 100px;
}

.img-hover {
	transition: 0.2s;
}
.img-hover:hover {
	opacity: 0.75;
}

/* ==========================================
   LINE CLAMP
   ========================================== */

.clamp-line-1,
.clamp-line-2,
.clamp-line-3,
.clamp-line-4,
.clamp-line-5,
.clamp-line-6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-line-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-line-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-line-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.clamp-line-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.clamp-line-5 { -webkit-line-clamp: 5; line-clamp: 5; }
.clamp-line-6 { -webkit-line-clamp: 6; line-clamp: 6; }

.single-referrals .marketing-field,
.single-referrals .referral-consent-field {
    display: none;
}

.clp {
  --r: attr(data-r px, 12px);
  --x: 100%; --y: 100%;
  width: var(--r); aspect-ratio: 1;
  background: var(--wp--preset--color--base);
  mask: radial-gradient(
    circle var(--r) at var(--x) var(--y),
    transparent 99%, var(--wp--preset--color--contrast) 100% );
}

.clp.mtl { --x: 100%; --y: 100%; }
.clp.mtr { --x: 0%; --y: 100%; }
.clp.mbl { --x: 100%; --y: 0%; }
.clp.mbr { --x: 0%; --y: 0%; }

.ltr {
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] .ltr {
    text-align: right;
}

/* ==========================================
   RTL FLOW-AWARE GRADIENT MASKS
   Tambahkan hanya jika left/right dimaksudkan
   mengikuti arah layout, bukan sisi fisik.
   ========================================== */

html[dir="rtl"] .gradient-mask.mask-left .wp-block-cover__background {
    background: linear-gradient(
        270deg,
        var(--mask-color) 35%,
        var(--mask-fade)
    ) !important;
}

html[dir="rtl"] .gradient-mask.mask-right .wp-block-cover__background {
    background: linear-gradient(
        90deg,
        var(--mask-color) 35%,
        var(--mask-fade)
    ) !important;
}

html[dir="rtl"] .gradient-mask.soft-left .wp-block-cover__background {
    background: linear-gradient(
        270deg,
        transparent,
        var(--mask-fade-thick)
    ) !important;
}

html[dir="rtl"] .gradient-mask.soft-right .wp-block-cover__background {
    background: linear-gradient(
        90deg,
        transparent,
        var(--mask-fade-thick)
    ) !important;
}

@media (max-width: 768px) {
    html[dir="rtl"] .gradient-mask.mask-mob-left .wp-block-cover__background {
        background: linear-gradient(
            270deg,
            var(--mask-color) 35%,
            var(--mask-fade)
        ) !important;
    }

    html[dir="rtl"] .gradient-mask.mask-mob-right .wp-block-cover__background {
        background: linear-gradient(
            90deg,
            var(--mask-color) 35%,
            var(--mask-fade)
        ) !important;
    }

    html[dir="rtl"] .gradient-mask.soft-mob-left .wp-block-cover__background {
        background: linear-gradient(
            270deg,
            transparent,
            var(--mask-fade-thick)
        ) !important;
    }

    html[dir="rtl"] .gradient-mask.soft-mob-right .wp-block-cover__background {
        background: linear-gradient(
            90deg,
            transparent,
            var(--mask-fade-thick)
        ) !important;
    }
}

/* ==========================================
   RTL DIRECTIONAL ADJUSTMENTS
   ========================================== */

/*
 * External-link icon berada di sisi kiri teks pada RTL.
 * Gerakkan keluar ke kiri saat hover.
 */
html[dir="rtl"] .rlg-external-link:hover .rlg-external-link__icon {
    transform: translate(-2px, -2px);
}
/*
 * Utility opsional untuk ikon yang memang menunjukkan
 * arah navigasi atau perpindahan.
 */
html[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* MOBILE HERO */
@media (max-width: 768px) {
	.mobile-hero {
		min-height: calc(100vh - 80px) !important;
		padding-top: 120px !important;
	}
}