/* Orion Hero Swiper Styles - Standard CSS */

/* Hero Section Base — heights and bottom margin follow the reference's
   mobile-first steps (h-[450px] / sm:h-[700px] / lg:h-screen and
   mb-8 / md:mb-[50px] / lg:mb-[60px] / 1xl:mb-20 / 2xl:mb-[100px]). */
.orion-hero-section {
    position: relative;
    overflow: hidden;
    height: 450px;
    margin-bottom: 32px;
}
@media (min-width: 640px)  { .orion-hero-section { height: 700px; } }
@media (min-width: 769px)  { .orion-hero-section { margin-bottom: 50px; } }
@media (min-width: 992px)  { .orion-hero-section { height: 100vh; margin-bottom: 60px; } }
@media (min-width: 1380px) { .orion-hero-section { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-hero-section { margin-bottom: 100px; } }

/* Full-bleed section that ignores page container constraints */
.orion-fullbleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Swiper Container */
.orion-hero-section .swiper {
    width: 100%;
    height: 100%;
}

.orion-hero-section .swiper-slide {
    position: relative;
}

/* Main Slides */
.orion-hero-section .orion-main-swiper .swiper-slide img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Content Container */
/* Standard centred container, same max-width steps as the rest of the
   site. It was absolutely positioned and pinned to left:5%, which put the
   caption 30px off horizontally and (with the wrapper centring below) 120px
   too low. */
.orion-hero-section .orion-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin-inline: auto;
    padding: 0 16px;
}
@media (min-width: 640px)  { .orion-hero-section .orion-container { max-width: 640px; } }
@media (min-width: 769px)  { .orion-hero-section .orion-container { max-width: 769px; } }
@media (min-width: 992px)  { .orion-hero-section .orion-container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-hero-section .orion-container { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-hero-section .orion-container { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-hero-section .orion-container { max-width: 1752px; } }

/* Content Positioning — the caption sits at a fixed distance from the top
   of the hero, it is not vertically centred. */
.orion-hero-section .orion-content-wrapper {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 150px;
}
@media (min-width: 769px)  { .orion-hero-section .orion-content-wrapper { padding-top: 240px; } }
@media (min-width: 1752px) { .orion-hero-section .orion-content-wrapper { padding-top: 290px; } }


/* Slide Content — the tint lives on .orion-slide-overlay (driven by the
   widget's Overlay Color control). Setting it here as well stacked two 35%
   black layers and made the caption panel far darker than the design. */
.orion-slide-content {
    max-width: 465px;
    width: 100%;
    padding: 32px 35px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

@media (min-width: 640px) {
    .orion-slide-content {
        gap: 24px;
    }
}

@media (min-width: 992px) {
    .orion-slide-content {
        max-width: 534px;
    }
}

@media (min-width: 1199px) {
    .orion-slide-content {
        gap: 28px;
        max-width: 575px;
    }
}

@media (min-width: 1380px) {
    .orion-slide-content {
        gap: 35px;
        padding: 40px 43px;
        max-width: 650px;
    }

}

/* The reference's first slide is authored 20px narrower than the rest, but
   only in this range — from 1752px every slide is 800px wide. Scoped to the
   range because this selector outranks the plain .orion-slide-content rules. */
@media (min-width: 1380px) and (max-width: 1751px) {
    .orion-main-swiper .swiper-slide[data-swiper-slide-index="0"] .orion-slide-content,
    .orion-main-swiper .swiper-slide:first-child .orion-slide-content {
        max-width: 630px;
    }
}

@media (min-width: 1752px) {
    .orion-slide-content {
        max-width: 800px;
        gap: 40px;
        padding: 45px 50px;
    }
}

/* Overlay */
.orion-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Typography — matches the real .sub-title component + bare <h1> tag
   rules from tailwind.css, since the source markup relies on those
   rather than any custom classes. */
/* index.html .sub-title on hero label — Lexend 500 uppercase (not Kit h6). */
html body h6.orion-slide-category,
.orion-slide-category {
    color: #fff !important;
    margin: 0;
    font-family: var(--orion-font-body, Lexend, sans-serif) !important;
    font-weight: 500 !important;
    text-align: center;
    font-size: 14px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3em !important;
    position: relative;
    z-index: 2;
}
@media (min-width: 640px) {
	html body h6.orion-slide-category,
	.orion-slide-category { text-align: left; font-size: 15px !important; }
}
@media (min-width: 769px) {
	html body h6.orion-slide-category,
	.orion-slide-category { font-size: 16px !important; }
}
@media (min-width: 992px) {
	html body h6.orion-slide-category,
	.orion-slide-category { font-size: 17px !important; }
}
@media (min-width: 1752px) {
	html body h6.orion-slide-category,
	.orion-slide-category { font-size: 20px !important; }
}

/* index.html h1 + font-normal + leading-tight — beat Kit flat h1 / Elementor sizes. */
html body h1.orion-slide-heading,
.orion-slide-heading {
    color: #fff !important;
    font-family: var(--orion-font-heading, "El Messiri", serif) !important;
    font-weight: 400 !important;
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 28px !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    position: relative;
    z-index: 2;
}
@media (min-width: 640px) {
	html body h1.orion-slide-heading,
	.orion-slide-heading { width: 90%; text-align: left; font-size: 36px !important; }
}
@media (min-width: 992px) {
	html body h1.orion-slide-heading,
	.orion-slide-heading { font-size: 42px !important; }
}
@media (min-width: 1199px) {
	html body h1.orion-slide-heading,
	.orion-slide-heading { font-size: 48px !important; }
}
@media (min-width: 1380px) {
	html body h1.orion-slide-heading,
	.orion-slide-heading { font-size: 55px !important; }
}
@media (min-width: 1752px) {
	html body h1.orion-slide-heading,
	.orion-slide-heading { font-size: 70px !important; }
}

/* Thumbnail Cards Container */
.orion-thumbnail-container {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: none;
    padding: 0 16px;
    width: 100%;
}
@media (min-width: 769px)  { .orion-thumbnail-container { max-width: 769px; } }
@media (min-width: 992px)  { .orion-thumbnail-container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-thumbnail-container { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-thumbnail-container { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-thumbnail-container { max-width: 1752px; } }

@media (min-width: 769px) {
    .orion-thumbnail-container {
        display: block;
    }
}

/* The active marker sits on the swiper slide, not on the card, so it adds
   3px below the card rather than eating into it. */
.orion-thumbnail-swiper .swiper-slide-thumb-active {
    border-bottom: 3px solid var(--orion-primary);
}

/* Thumbnail Cards — matches the real .hero-slide component: a plain white
   flex row with no shadow, radius or border of its own. */
.orion-thumbnail-card {
    background: #fff;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 16px 16px 24px;
    cursor: pointer;
    width: 100%;
}
@media (min-width: 769px) { .orion-thumbnail-card { padding: 10px 10px 10px 24px; } }
@media (min-width: 992px) { .orion-thumbnail-card { padding: 14px 14px 14px 24px; } }
@media (min-width: 1380px) { .orion-thumbnail-card { padding: 11px 11px 11px 24px; gap: 30px; } }
@media (min-width: 1752px) { .orion-thumbnail-card { padding: 16px 16px 16px 24px; } }

/* Card Content */
.orion-thumbnail-card .orion-card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 0;
}

/* Colours come from the widget's Card Text Color control; the sizes step
   with the reference's h5 / p2 type scale. */
/* index.html hero thumb h5 — beat Kit flat h5. */
html body h5.orion-thumbnail-card-title,
.orion-thumbnail-card-title {
    margin: 0;
    font-family: var(--orion-font-heading, "El Messiri", serif) !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 26px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
@media (min-width: 640px)  {
	html body h5.orion-thumbnail-card-title,
	.orion-thumbnail-card-title { font-size: 22px !important; }
}
@media (min-width: 769px)  {
	html body h5.orion-thumbnail-card-title,
	.orion-thumbnail-card-title { line-height: 30px !important; }
}
@media (min-width: 1752px) {
	html body h5.orion-thumbnail-card-title,
	.orion-thumbnail-card-title { font-size: 25px !important; line-height: 35px !important; }
}

.orion-thumbnail-card-desc {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 19.5px;
}
@media (min-width: 769px)  { .orion-thumbnail-card-desc { font-size: 14px; line-height: 21px; } }
@media (min-width: 1752px) { .orion-thumbnail-card-desc { font-size: 16px; line-height: 24px; } }

/* Card Images — width only; height stretches to match the text column
   via the parent's align-items:stretch, exactly like the real markup
   (the image wrapper div has no explicit height class in the source). */
.orion-thumbnail-card .orion-card-image {
    width: 105px;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 1380px) {
    .orion-thumbnail-card .orion-card-image {
        width: 125px;
    }
}

.orion-thumbnail-card img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Swiper Navigation */
.orion-hero-section .swiper-button-next,
.orion-hero-section .swiper-button-prev {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    margin-top: -22px;
}
@media (min-width: 1752px) {
    .orion-hero-section .swiper-button-next,
    .orion-hero-section .swiper-button-prev { width: 34px; height: 34px; }
}

.orion-hero-section .swiper-button-next:after,
.orion-hero-section .swiper-button-prev:after {
    font-size: 15px;
    color: white;
}

.orion-hero-section .swiper-button-next {
    right: 4px;
}

.orion-hero-section .swiper-button-prev {
    left: 4px;
}

/* Swiper Pagination — the reference swaps these dots for the thumbnail
   strip from 769px up, rather than showing both. */
.orion-hero-section .swiper-pagination {
    bottom: 20px;
    z-index: 10;
}
@media (min-width: 769px) { .orion-hero-section .swiper-pagination { display: none; } }

/* Utility Classes */
.orion-absolute {
    position: absolute;
}

.orion-relative {
    position: relative;
}

.orion-w-full {
    width: 100%;
}

.orion-h-full {
    height: 100%;
}

.orion-flex {
    display: flex;
}

.orion-flex-col {
    flex-direction: column;
}

.orion-items-center {
    align-items: center;
}

.orion-justify-center {
    justify-content: center;
}

.orion-justify-between {
    justify-content: space-between;
}

.orion-z-10 {
    z-index: 10;
}

.orion-z-1 {
    z-index: 1;
}

.orion-text-white {
    color: white;
}

.orion-m-0 {
    margin: 0;
}

.orion-font-normal {
    font-weight: normal;
}

.orion-object-cover {
    object-fit: cover;
}

/* Swiper Thumbnail Responsive Settings */
.orion-thumbnail-swiper {
    padding: 0 6px;
}

@media (min-width: 992px) {
    .orion-thumbnail-swiper {
        padding: 0 10px;
    }
}

/* Focus States for Accessibility */
.orion-thumbnail-card:focus {
    outline: 2px solid var(--orion-primary);
    outline-offset: 2px;
}

.orion-hero-section .swiper-button-next:focus,
.orion-hero-section .swiper-button-prev:focus {
    outline: 2px solid var(--orion-primary);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .orion-slide-content {
        background: rgba(0, 0, 0, 0.7);
    }
    
    .orion-thumbnail-card {
        border: 2px solid #000;
    }
    
    .orion-thumbnail-swiper .swiper-slide-thumb-active .orion-thumbnail-card {
        border-color: #000;
        background: #fff;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .orion-thumbnail-card,
    .orion-hero-section .swiper-button-next,
    .orion-hero-section .swiper-button-prev,
    .orion-slide-content {
        transition: none;
    }
    
    .orion-hero-section .swiper-slide-active .orion-slide-content {
        animation: none;
    }
}
/* ══════════════════════════════════════════════════════════════════
   Layout 2 Hero — index-2.html (split content + rotating badge)
   Breakpoints match the project's real Tailwind config: sm=640, md=769,
   lg=992, xl=1199, 1xl=1380, 2xl=1752
   ══════════════════════════════════════════════════════════════════ */

.oh2-hero {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
}
@media (min-width: 769px) { .oh2-hero { margin-bottom: 50px; } }
@media (min-width: 992px) { .oh2-hero { margin-bottom: 60px; } }
@media (min-width: 1380px) { .oh2-hero { margin-bottom: 80px; } }
@media (min-width: 1752px) { .oh2-hero { margin-bottom: 100px; } }

.oh2-hero__row {
    display: flex;
    flex-direction: column-reverse;
}
@media (min-width: 769px) { .oh2-hero__row { flex-direction: column; } }

.oh2-hero__content-inner {
    padding-top: 28px;
}
@media (min-width: 769px) { .oh2-hero__content-inner { padding-top: 56px; padding-bottom: 40px; } }
@media (min-width: 1199px) { .oh2-hero__content-inner { padding-top: 72px; } }
@media (min-width: 1380px) { .oh2-hero__content-inner { padding-top: 96px; padding-bottom: 64px; } }

.oh2-hero__content-inner > div {
    width: 100%;
}
@media (min-width: 769px) { .oh2-hero__content-inner > div { width: 70%; } }
@media (min-width: 1199px) { .oh2-hero__content-inner > div { width: 60%; } }

/* HTML `.sub-title` — Lexend medium uppercase */
html body h6.oh2-hero__sub-title,
.oh2-hero__sub-title {
    margin: 0 0 28px;
    font-family: var(--orion-font-body, Lexend, sans-serif) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}
@media (min-width: 640px)  {
	html body h6.oh2-hero__sub-title,
	.oh2-hero__sub-title { font-size: 15px !important; }
}
@media (min-width: 769px)  {
	html body h6.oh2-hero__sub-title,
	.oh2-hero__sub-title { font-size: 16px !important; }
}
@media (min-width: 992px)  {
	html body h6.oh2-hero__sub-title,
	.oh2-hero__sub-title { font-size: 17px !important; }
}
@media (min-width: 1380px) {
	html body h6.oh2-hero__sub-title,
	.oh2-hero__sub-title { margin-bottom: 32px; letter-spacing: 0.25em !important; }
}
@media (min-width: 1752px) {
	html body h6.oh2-hero__sub-title,
	.oh2-hero__sub-title { font-size: 20px !important; }
}

/* Match HTML bare <h1> type scale (font-medium = 500 + responsive size/leading). */
html body h1.oh2-hero__heading,
.oh2-hero__heading {
    margin: 0;
    font-family: var(--orion-font-heading, "El Messiri", serif) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 36px !important;
    text-transform: none !important;
}
@media (min-width: 640px)  {
	html body h1.oh2-hero__heading,
	.oh2-hero__heading { font-size: 36px !important; line-height: 44px !important; }
}
@media (min-width: 992px)  {
	html body h1.oh2-hero__heading,
	.oh2-hero__heading { font-size: 42px !important; line-height: 52px !important; }
}
@media (min-width: 1199px) {
	html body h1.oh2-hero__heading,
	.oh2-hero__heading { font-size: 48px !important; line-height: 60px !important; }
}
@media (min-width: 1380px) {
	html body h1.oh2-hero__heading,
	.oh2-hero__heading { font-size: 55px !important; line-height: 66px !important; }
}
@media (min-width: 1752px) {
	html body h1.oh2-hero__heading,
	.oh2-hero__heading { font-size: 70px !important; line-height: 84px !important; }
}

.oh2-hero__media-wrap {
    position: relative;
    width: 100%;
    display: block;
    padding-inline: 0;
}
@media (min-width: 640px) { .oh2-hero__media-wrap { padding-inline: 60px; } }
@media (min-width: 992px) { .oh2-hero__media-wrap { padding-inline: 90px; } }
@media (min-width: 1380px) { .oh2-hero__media-wrap { padding-inline: 100px; } }

.oh2-hero__media { position: relative; }

.oh2-hero__badge {
    position: absolute;
    right: -64px;
    bottom: -60.8px;
    width: 132px;
    height: 132px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    z-index: 3;
}
@media (min-width: 640px) { .oh2-hero__badge { width: 150px; height: 150px; bottom: -64px; } }
@media (min-width: 769px) {
    .oh2-hero__badge { width: 155px; height: 185px; top: -92.8px; bottom: auto; right: -64px; }
}
@media (min-width: 1199px) { .oh2-hero__badge { right: -76.8px; } }
@media (min-width: 1380px) { .oh2-hero__badge { top: -100.8px; height: 204px; } }
@media (min-width: 1752px) { .oh2-hero__badge { width: 204px; right: -102.4px; } }

.oh2-hero__badge-ring {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Ensure spin works even if utility class order fights Elementor CSS */
.oh2-hero__badge-ring.animate-spin-slow,
.oh2-hero__badge .animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}

/* Typography (size/weight/family) comes from Elementor Style + theme settings.
   Keep only SVG fill defaults here; Elementor badge text color overrides fill. */
.oh2-hero__badge-text {
    fill: currentColor;
    text-transform: uppercase;
}

.oh2-hero__badge-icon {
    width: 62px;
    height: 62px;
}
@media (min-width: 769px) { .oh2-hero__badge-icon { width: 70px; height: 70px; } }

.oh2-hero__swiper {
    max-height: 520px;
}
@media (min-width: 1199px) { .oh2-hero__swiper { max-height: 560px; } }
@media (min-width: 1380px) { .oh2-hero__swiper { max-height: 600px; } }
@media (min-width: 1752px) { .oh2-hero__swiper { max-height: 756px; } }
.oh2-hero__swiper .swiper-slide { height: auto; }

.oh2-hero__img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Navigation — matches .home-2-hero arrows from the HTML reference */
.oh2-hero .swiper-button-next,
.oh2-hero .swiper-button-prev {
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
@media (min-width: 769px) {
    .oh2-hero .swiper-button-next,
    .oh2-hero .swiper-button-prev { width: 40px; height: 40px; }
}
@media (min-width: 1199px) {
    .oh2-hero .swiper-button-next,
    .oh2-hero .swiper-button-prev { width: 45px; height: 45px; }
}
@media (min-width: 1752px) {
    .oh2-hero .swiper-button-next,
    .oh2-hero .swiper-button-prev { width: 50px; height: 50px; }
}
.oh2-hero .swiper-button-next:after,
.oh2-hero .swiper-button-prev:after {
    color: #fff;
    font-size: 16px;
}
@media (min-width: 769px) {
    .oh2-hero .swiper-button-next:after,
    .oh2-hero .swiper-button-prev:after { font-size: 20px; }
}