:root {
     --ls_white: #ffffff;
     --ls_bg: #fcfcfc;
     --ls_bg_soft: #f8f8f8;
     --ls_border: #ececec;
     --ls_text: #2c2c2c;
     --ls_muted: #777777;
     --ls_red: #c92a2a;
     --ls_red_soft: #fdf1f1;
     --ls_shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
     --ls_radius: 14px;

     /*  galeria */
     --gal-h: 300px;
     --gal-gap: 4px;
     --gal-caption-bg: rgba(17, 14, 14, 0.75);
     --gal-accent: #e8c840;
     --gal-font-hd: 'Barlow Condensed', sans-serif;
     --gal-font-body: 'Barlow', sans-serif;
     --gal-radius: 3px;


     /* index */
     --g-bg: #f5f5f5;
     --g-surface: #ffffff;
     --g-border: #e0e0e0;
     --g-border-md: #cccccc;
     --g-red: #cc1a1a;
     --g-red-dk: #a01414;
     --g-red-lt: rgba(204, 26, 26, .08);
     --g-text: #1a1a1a;
     --g-text-md: #444444;
     --g-text-lt: #777777;
     --g-muted: #999999;
     --g-col-side: 200px;
     --g-gap: 18px;
     --g-radius: 5px;
     --g-font-body: 'Open Sans', sans-serif;
     --g-font-head: 'Playfair Display', Georgia, serif;
     --g-shadow-sm: 0 1px 4px rgba(0, 0, 0, .08);
     --g-shadow-md: 0 4px 16px rgba(0, 0, 0, .12);
     --g-shadow-lg: 0 12px 40px rgba(0, 0, 0, .18);
}


body {

     font-family: var(--gal-font-body);
     background: var(--ls_bg);
     color: var(--ls_text);
     margin: 0;

}


a {
     text-decoration: none;
     transition: all 0.25s ease;
     color: var(--g-red);
     text-decoration: none;
}

a:hover {
     color: var(--g-red-dk);
     text-decoration: underline;
}

.ls_topbar {
     background: #fafafa;
     border-bottom: 1px solid var(--ls_border);
     font-size: 13px;
     color: var(--ls_muted);
}

.ls_topbar_inner {
     min-height: 40px;
}

.ls_topbar_left {
     font-weight: 500;
}

.ls_topbar_right {
     gap: 16px;
}

.ls_socials {
     display: inline-flex;
     align-items: center;
     gap: 10px;
}

.ls_socials a {
     color: var(--ls_muted);
     font-size: 15px;
}

.ls_socials a:hover {
     color: var(--ls_red);
     transform: translateY(-1px);
}

.ls_lang_switch {
     display: inline-flex;
     align-items: center;
     background: var(--ls_white);
     border: 1px solid var(--ls_border);
     border-radius: 999px;
     overflow: hidden;
}

.ls_lang_switch a {
     color: var(--ls_muted);
     padding: 6px 12px;
     font-weight: 600;
     font-size: 12px;
}

.ls_lang_switch a.active,
.ls_lang_switch a:hover {
     background: var(--ls_red_soft);
     color: var(--ls_red);
}

.ls_header_wrap {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--ls_border);
     position: sticky;
     top: 0;
     z-index: 1030;
}

.ls_header {
     min-height: 72px;
}

.ls_brand {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-weight: 700;
     font-size: 22px;
     color: var(--ls_text);
}

.ls_brand:hover {
     color: var(--ls_text);
}

.ls_brand_mark {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--ls_red), #e45757);
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     box-shadow: 0 10px 22px rgba(201, 42, 42, 0.18);
}

.ls_navbar .nav-link {
     color: var(--ls_text);
     font-weight: 600;
     font-size: 14px;
     padding: 10px 14px !important;
     border-radius: 10px;
}

.ls_navbar .nav-link:hover,
.ls_navbar .nav-link:focus,
.ls_navbar .nav-link.active {
     color: var(--ls_red);
     background: var(--ls_red_soft);
}

.ls_navbar .dropdown-menu {
     border: 1px solid var(--ls_border);
     border-radius: 14px;
     box-shadow: var(--ls_shadow);
     padding: 10px;
     min-width: 220px;
     margin-top: 10px;
}

.ls_navbar .dropdown-item {
     border-radius: 10px;
     padding: 10px 12px;
     font-size: 14px;
     color: var(--ls_text);
}

.ls_navbar .dropdown-item:hover {
     background: var(--ls_red_soft);
     color: var(--ls_red);
}

.ls_header_action {
     border: 1px solid rgba(201, 42, 42, 0.16);
     background: var(--ls_red_soft);
     color: var(--ls_red);
     font-weight: 700;
     padding: 10px 16px;
     border-radius: 12px;
     font-size: 14px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
}

.ls_header_action:hover {
     background: var(--ls_red);
     color: #fff;
}

.ls_user_dropdown .dropdown-toggle::after {
     margin-left: 8px;
}

.ls_user_dropdown .dropdown-menu {
     min-width: 240px;
     border: 1px solid var(--ls_border);
     border-radius: 14px;
     box-shadow: var(--ls_shadow);
     padding: 10px;
     margin-top: 12px;
}

.ls_user_card {
     padding: 10px 12px 12px;
     border-bottom: 1px solid var(--ls_border);
     margin-bottom: 8px;
}

.ls_user_name {
     font-size: 14px;
     font-weight: 700;
     color: var(--ls_text);
     margin-bottom: 3px;
}

.ls_user_email {
     font-size: 12px;
     color: var(--ls_muted);
     word-break: break-word;
}

.ls_user_dropdown .dropdown-item {
     border-radius: 10px;
     padding: 10px 12px;
     font-size: 14px;
     color: var(--ls_text);
}

.ls_user_dropdown .dropdown-item:hover {
     background: var(--ls_red_soft);
     color: var(--ls_red);
}

.ls_user_dropdown .dropdown-item.ls_logout_link {
     color: var(--ls_red);
     font-weight: 700;
}

.ls_hero {
     padding: 72px 0;
}

.ls_hero_box {
     background: linear-gradient(180deg, #ffffff, #fcfcfc);
     border: 1px solid var(--ls_border);
     border-radius: 24px;
     padding: 56px 32px;
     box-shadow: var(--ls_shadow);
}

.ls_eyebrow {
     display: inline-block;
     font-size: 13px;
     font-weight: 700;
     color: var(--ls_red);
     background: var(--ls_red_soft);
     padding: 8px 14px;
     border-radius: 999px;
     margin-bottom: 16px;
}

.ls_hero h1 {
     font-size: 42px;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 16px;
}

.ls_hero p {
     color: var(--ls_muted);
     font-size: 16px;
     max-width: 720px;
     margin: 0 auto 28px;
}

.ls_btn_primary {
     background: var(--ls_red);
     color: #fff;
     border-radius: 12px;
     padding: 12px 20px;
     font-weight: 700;
     border: none;
}

.ls_btn_primary:hover {
     background: #ab2020;
     color: #fff;
}

.ls_btn_light {
     background: #fff;
     color: var(--ls_text);
     border: 1px solid var(--ls_border);
     border-radius: 12px;
     padding: 12px 20px;
     font-weight: 700;
}

.ls_btn_light:hover {
     border-color: rgba(201, 42, 42, 0.25);
     color: var(--ls_red);
}

.ls_footer {
     background: #fbfbfb;
     border-top: 1px solid var(--ls_border);
     margin-top: 70px;
}

.ls_footer_top {
     padding: 26px 0 18px;
}

.ls_footer_brand {
     font-size: 18px;
     font-weight: 700;
     color: var(--ls_text);
}

.ls_footer_text {
     color: var(--ls_muted);
     font-size: 14px;
     margin-top: 8px;
}

.ls_footer_links {
     display: flex;
     flex-wrap: wrap;
     gap: 14px 20px;
     justify-content: end;
}

.ls_footer_links a {
     color: var(--ls_muted);
     font-size: 14px;
     font-weight: 600;
}

.ls_footer_links a:hover {
     color: var(--ls_red);
}

.ls_footer_bottom {
     border-top: 1px solid var(--ls_border);
     padding: 16px 0 24px;
}

.ls_footer_copy {
     color: var(--ls_muted);
     font-size: 13px;
}

@media (max-width: 991.98px) {
     .ls_header {
          min-height: 66px;
     }

     .ls_navbar {
          padding-top: 10px;
     }

     .ls_navbar .nav-link {
          margin-bottom: 6px;
     }

     .ls_footer_links {
          justify-content: start;
          margin-top: 18px;
     }
}

@media (max-width: 767.98px) {
     .ls_topbar_inner {
          gap: 10px;
          padding: 8px 0;
     }

     .ls_topbar_right {
          width: 100%;
          justify-content: space-between;
     }

     .ls_hero {
          padding: 42px 0;
     }

     .ls_hero_box {
          padding: 36px 20px;
     }

     .ls_hero h1 {
          font-size: 30px;
     }
}

/* ══════════ SECTION HEADERS (shared across sections) ═════════════════════ */
.fr_section-label {
     display: inline-flex;
     align-items: center;
     gap: .55rem;
     font-family: var(--g-font-body);
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--g-red);
     margin-bottom: .4rem;
}

.fr_section-label::before {
     content: '';
     display: inline-block;
     width: 22px;
     height: 2px;
     background: var(--g-red);
}

.fr_section-title {
     font-family: var(--g-font-head);
     font-size: 2rem;
     font-weight: 700;
     color: var(--g-text);
     line-height: 1.2;
     margin-bottom: .5rem;
}

.fr_section-divider {
     width: 48px;
     height: 3px;
     background: var(--g-red);
     margin-bottom: 2rem;
}

/* ════════ SECTION 2 — HERO CAROUSEL ════════ */

.fr_hero {
     width: 100%;
     height: 700px;
     position: relative;
     overflow: hidden;
}

.fr_hero .carousel,
.fr_hero .carousel-inner,
.fr_hero .carousel-item {
     height: 100%;
}

.fr_hero .carousel-item {
     background-color: #111;
     position: relative;
}

.fr_hero-bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
     filter: brightness(.5);
     transition: transform 8s ease;
}

.fr_hero .carousel-item.active .fr_hero-bg {
     transform: scale(1.04);
}

/* Dark gradient overlay */
.fr_hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom,
               rgba(0, 0, 0, .12) 0%,
               rgba(10, 10, 10, .55) 60%,
               rgba(10, 10, 10, .82) 100%);
     z-index: 1;
}

.fr_hero-content {
     position: absolute;
     inset: 0;
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 2rem 1.5rem;
}

.fr_hero-eyebrow {
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--g-red);
     background: rgba(255, 255, 255, .08);
     border: 1px solid rgba(204, 26, 26, .4);
     border-radius: 3px;
     padding: .25em .9em;
     margin-bottom: 1rem;
     display: inline-block;
}

.fr_hero-headline {
     font-family: var(--g-font-head);
     font-size: clamp(2rem, 5vw, 3.8rem);
     font-weight: 900;
     color: #fff;
     line-height: 1.12;
     text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
     margin-bottom: .85rem;
     max-width: 860px;
}

.fr_hero-sub {
     font-size: clamp(.95rem, 2vw, 1.2rem);
     color: rgba(255, 255, 255, .82);
     max-width: 600px;
     margin-bottom: 2rem;
     line-height: 1.6;
}

/* Search bar */
.fr_hero-search {
     display: flex;
     align-items: stretch;
     width: 100%;
     max-width: 580px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
     border-radius: 5px;
     overflow: hidden;
}

.fr_hero-search input {
     flex: 1;
     border: none;
     padding: .85rem 1.2rem;
     font-family: var(--g-font-body);
     font-size: .95rem;
     color: var(--g-text);
     outline: none;
     background: #fff;
}

.fr_hero-search input::placeholder {
     color: var(--g-muted);
}

.fr_hero-search button {
     background: var(--g-red);
     border: none;
     color: #fff;
     padding: .85rem 1.5rem;
     font-family: var(--g-font-body);
     font-size: .9rem;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: .5rem;
     transition: background .15s;
     letter-spacing: .04em;
     white-space: nowrap;
}

.fr_hero-search button:hover {
     background: var(--g-red-dk);
}

/* Carousel controls */
.fr_hero .carousel-control-prev,
.fr_hero .carousel-control-next {
     width: 48px;
     height: 48px;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .25);
     border-radius: 50%;
     opacity: 1;
     transition: background .15s;
}

.fr_hero .carousel-control-prev {
     left: 24px;
}

.fr_hero .carousel-control-next {
     right: 24px;
}

.fr_hero .carousel-control-prev:hover,
.fr_hero .carousel-control-next:hover {
     background: rgba(255, 255, 255, .28);
}

.fr_hero .carousel-control-prev-icon,
.fr_hero .carousel-control-next-icon {
     width: 18px;
     height: 18px;
}

/* Carousel indicators */
.fr_hero .carousel-indicators {
     bottom: 22px;
     gap: 6px;
     margin: 0;
}

.fr_hero .carousel-indicators [data-bs-target] {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .4);
     border: none;
     transition: background .2s, transform .2s;
     opacity: 1;
}

.fr_hero .carousel-indicators .active {
     background: var(--g-red);
     transform: scale(1.3);
}

/* ════════════ SECTION 3 — PHOTO GALLERY (4×4 with Show More) ══════════ */
.fr_gallery-section {
     background: var(--g-bg);
     padding: 4rem 0 3rem;
}

.fr_photo-card {
     background: var(--g-surface);
     border: 1px solid var(--g-border);
     border-radius: var(--g-radius);
     overflow: hidden;
     box-shadow: var(--g-shadow-sm);
     transition: box-shadow .2s, transform .18s;
     cursor: pointer;
     height: 100%;
     display: flex;
     flex-direction: column;
}

.fr_photo-card:hover {
     box-shadow: var(--g-shadow-md);
     transform: translateY(-3px);
}

.fr_photo-thumb {
     position: relative;
     overflow: hidden;
     aspect-ratio: 4/3;
     background: #e8e8e8;
     flex-shrink: 0;
}

.fr_photo-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .35s ease;
}

.fr_photo-card:hover .fr_photo-thumb img {
     transform: scale(1.06);
}

/* Red label badge — top right */
.fr_photo-label {
     position: absolute;
     top: 8px;
     right: 8px;
     background: var(--g-red);
     color: #fff;
     font-size: .6rem;
     font-weight: 700;
     letter-spacing: .09em;
     text-transform: uppercase;
     padding: .15em .5em;
     border-radius: 3px;
     z-index: 2;
     pointer-events: none;
     white-space: nowrap;
}

.fr_photo-body {
     padding: .6rem .65rem .5rem;
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: .18rem;
}

.fr_photo-category {
     font-size: .62rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--g-red);
}

.fr_photo-title {
     font-family: var(--g-font-body);
     font-size: .82rem;
     font-weight: 600;
     color: var(--g-text);
     line-height: 1.35;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     flex: 1;
}

.fr_photo-date {
     font-size: .68rem;
     color: var(--g-muted);
     display: flex;
     align-items: center;
     gap: .3rem;
     margin-top: .15rem;
}

.fr_photo-date i {
     font-size: .65rem;
     color: var(--g-red);
}

/* Hidden rows */
.fr_gallery-extra {
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.4s ease;
     display: none;
}

.fr_gallery-extra.fr_visible {
     display: block;
     opacity: 1;
     transform: translateY(0);
}

/* Show More button */
.fr_showmore-wrap {
     text-align: center;
     margin-top: 3rem;
     margin-bottom: 3rem;
}

.fr_showmore-btn {
     display: inline-flex;
     align-items: center;
     gap: .6rem;
     background: #fff;
     border: 2px solid var(--g-red);
     color: var(--g-red);
     font-family: var(--g-font-body);
     font-size: .9rem;
     font-weight: 700;
     letter-spacing: .06em;
     padding: 1rem 2.8rem;
     border-radius: 4px;
     cursor: pointer;
     transition: background .18s, color .18s;
     text-transform: uppercase;
}

.fr_showmore-btn:hover {
     background: var(--g-red);
     color: #fff;
     text-decoration: none;
}

.fr_showmore-btn i {
     transition: transform .2s;
}

.fr_showmore-btn.fr_open i {
     transform: rotate(180deg);
}

/* ════════ SECTION 4 — ABOUT US ════════ */

.fr_about-section {
     background: var(--g-surface);
     padding: 5rem 0;
     border-top: 1px solid var(--g-border);
     border-bottom: 1px solid var(--g-border);
}

.fr_about-img-wrap {
     position: relative;
     border-radius: 6px;
     overflow: hidden;
     box-shadow: var(--g-shadow-lg);
}

.fr_about-img-wrap img {
     width: 100%;
     height: 460px;
     object-fit: cover;
     display: block;
}

/* Red accent corner */
.fr_about-img-wrap::before {
     content: '';
     position: absolute;
     bottom: -12px;
     right: -12px;
     width: 80px;
     height: 80px;
     background: var(--g-red);
     z-index: -1;
     border-radius: 4px;
}

.fr_about-text-col {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 1rem 0 1rem 2rem;
}

@media (max-width: 991px) {
     .fr_about-text-col {
          padding: 2rem 0 0;
     }

     .fr_about-img-wrap img {
          height: 300px;
     }
}

.fr_about-body {
     font-size: .95rem;
     color: var(--g-text-md);
     line-height: 1.7;
     margin-bottom: 1.5rem;
}

.fr_about-stats {
     display: flex;
     gap: 2rem;
     margin-bottom: 2rem;
     flex-wrap: wrap;
}

.fr_stat-item {}

.fr_stat-num {
     font-family: var(--g-font-head);
     font-size: 2.2rem;
     font-weight: 700;
     color: var(--g-red);
     line-height: 1;
}

.fr_stat-label {
     font-size: .75rem;
     color: var(--g-muted);
     text-transform: uppercase;
     letter-spacing: .08em;
     font-weight: 600;
}

.fr_about-btn {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: var(--g-red);
     color: #fff;
     font-family: var(--g-font-body);
     font-size: .88rem;
     font-weight: 700;
     letter-spacing: .06em;
     padding: .75rem 2rem;
     border-radius: 4px;
     text-decoration: none;
     transition: background .15s;
     text-transform: uppercase;
     width: fit-content;
}

.fr_about-btn:hover {
     background: var(--g-red-dk);
     color: #fff;
     text-decoration: none;
}

/* ════════ SECTION 5 — SECOND HERO BANNER ════════ */
.fr_banner {
     position: relative;
     height: 480px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
}

.fr_banner-bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     filter: brightness(.42);
}

.fr_banner-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(204, 26, 26, .35) 0%, rgba(0, 0, 0, .5) 100%);
}

.fr_banner-content {
     position: relative;
     z-index: 2;
     text-align: center;
     padding: 2rem 1.5rem;
     max-width: 780px;
     margin: 0 auto;
}

.fr_banner-eyebrow {
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .7);
     margin-bottom: .75rem;
}

.fr_banner-headline {
     font-family: var(--g-font-head);
     font-size: clamp(1.8rem, 4vw, 3rem);
     font-weight: 900;
     color: #fff;
     line-height: 1.15;
     text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
     margin-bottom: .85rem;
}

.fr_banner-sub {
     font-size: 1.05rem;
     color: rgba(255, 255, 255, .78);
     margin-bottom: 1.8rem;
     line-height: 1.6;
}

.fr_banner-btn {
     display: inline-flex;
     align-items: center;
     gap: .55rem;
     background: var(--g-red);
     color: #fff;
     font-family: var(--g-font-body);
     font-size: .9rem;
     font-weight: 700;
     letter-spacing: .08em;
     padding: .85rem 2.4rem;
     border-radius: 4px;
     text-decoration: none;
     text-transform: uppercase;
     transition: background .15s, transform .15s;
     box-shadow: 0 6px 24px rgba(204, 26, 26, .4);
}

.fr_banner-btn:hover {
     background: var(--g-red-dk);
     color: #fff;
     text-decoration: none;
     transform: translateY(-2px);
}

/* ════════ SECTION 6 — LINKED PHOTO GALLERY (5 per row × 2 rows) ════════ */
.fr_linked-gallery {
     background: var(--g-bg);
     padding: 4rem 0 4rem;
}

.fr_linked-card {
     background: var(--g-surface);
     border: 1px solid var(--g-border);
     border-radius: var(--g-radius);
     overflow: hidden;
     box-shadow: var(--g-shadow-sm);
     transition: box-shadow .2s, transform .18s;
     display: flex;
     flex-direction: column;
     height: 100%;
}

.fr_linked-card:hover {
     box-shadow: var(--g-shadow-md);
     transform: translateY(-2px);
}

.fr_linked-thumb {
     aspect-ratio: 16/10;
     overflow: hidden;
     background: #e8e8e8;
     flex-shrink: 0;
}

.fr_linked-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .35s ease;
}

.fr_linked-card:hover .fr_linked-thumb img {
     transform: scale(1.06);
}

.fr_linked-body {
     padding: .55rem .6rem .5rem;
     flex: 1;
}

.fr_linked-title {
     font-family: var(--g-font-body);
     font-size: .8rem;
     font-weight: 600;
     line-height: 1.35;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.fr_linked-title a {
     color: var(--g-text);
     text-decoration: none;
     transition: color .15s;
}

.fr_linked-title a:hover {
     color: var(--g-red);
     text-decoration: none;
}

/* Row gap for gallery rows */
.fr_gallery-row {
     --bs-gutter-y: 1.2rem;
}




.gal_wrapper {
     padding: 1.5rem;
}

.gal_heading {
     font-family: var(--gal-font-hd);
     font-size: 1.5rem;
     font-weight: 600;
     letter-spacing: .08em;
     color: #575757;
     margin-bottom: 1.2rem;
}

.gal_heading span {
     color: #414141;
}

/* ── Justified strip ───────────────────────────────
                Key ideas:
                • Every .gal_item has flex-grow set by JS to its
                  image's aspect ratio (width/height). This makes
                  all items in a full row share the row perfectly
                  at exactly --gal-h tall.
                • A ::after pseudo-element acts as an invisible
                  spacer with a very large flex-grow. It lives on
                  the same last row as the final real items and
                  absorbs all leftover space, so the real items
                  stay at their natural proportional width instead
                  of stretching to fill the row.
                • No max-width on items — photos are shown in full
                  at their true aspect ratio.
             ─────────────────────────────────────────────────── */
.gal_strip {
     display: flex;
     flex-wrap: wrap;
     gap: var(--gal-gap);
     align-items: flex-start;
}

/* Invisible last-row spacer — absorbs leftover space */
.gal_strip::after {
     content: '';
     flex-grow: 9999;
     /* beats any real item's grow value */
     min-width: 0;
     height: var(--gal-h);
}

/* ── Photo item ─────────────────────────────────── */
.gal_item {
     position: relative;
     overflow: hidden;
     border-radius: var(--gal-radius);
     cursor: zoom-in;
     background: #1e1e24;
     height: var(--gal-h);

     /*
                  * flex-grow starts at 1; JS replaces it with
                  * naturalWidth / naturalHeight so the item
                  * occupies exactly the right proportional width.
                  * No max-width — photos shown at true aspect ratio.
                  */
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
     min-width: 330px;
     /* safety floor for very tall portraits */
}

.gal_item img {
     /* Fill the item box completely — no distortion because
                    the box itself is already sized to the image ratio */
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     transition: transform .35s ease, filter .35s ease;
}

.gal_item:hover img {
     transform: scale(1.04);
     filter: brightness(.8);
}

/* ── Caption ────────────────────────────────────── */
.gal_caption {
     position: absolute;
     inset: auto 0 0 0;
     padding: .45rem .65rem;
     background: var(--gal-caption-bg);
     backdrop-filter: blur(4px);
     display: flex;
     flex-direction: column;
     gap: .1rem;
     transform: translateY(100%);
     transition: transform .28s ease;
}

.gal_item:hover .gal_caption {
     transform: translateY(0);
}

.gal_event {
     font-family: var(--gal-font-hd);
     font-size: .7rem;
     text-transform: uppercase;
     letter-spacing: .1em;
     color: var(--gal-accent);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.gal_title {
     font-family: var(--gal-font-hd);
     font-size: .95rem;
     font-weight: 600;
     color: #fff;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.gal_author {
     font-size: .72rem;
     font-weight: 300;
     color: #bbb;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

/* ── Load-more ──────────────────────────────────── */
.gal_loadmore_row {
     display: flex;
     justify-content: flex-end;
     margin-top: var(--gal-gap);
}

.gal_btn_more {
     font-family: var(--gal-font-hd);
     font-size: 1rem;
     font-weight: 600;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: #141418;
     background: var(--gal-accent);
     border: none;
     border-radius: var(--gal-radius);
     padding: .55rem 1.6rem;
     cursor: pointer;
     transition: background .2s, transform .15s;
     display: inline-flex;
     align-items: center;
     gap: .5rem;
}

.gal_btn_more:hover {
     background: #f0d450;
     transform: translateY(-1px);
}

.gal_btn_more:active {
     transform: translateY(0);
}

.gal_btn_more:disabled {
     opacity: .6;
     cursor: not-allowed;
     transform: none;
}

.gal_spinner {
     display: none;
     width: 1em;
     height: 1em;
     border: 2px solid rgba(0, 0, 0, .3);
     border-top-color: #141418;
     border-radius: 50%;
     animation: gal_spin .6s linear infinite;
}

.gal_btn_more.gal_loading .gal_spinner {
     display: inline-block;
}

.gal_btn_more.gal_loading .gal_btn_label {
     opacity: .5;
}

@keyframes gal_spin {
     to {
          transform: rotate(360deg);
     }
}

/* ── Lightbox ───────────────────────────────────── */
.gal_lightbox {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 1080;
     background: rgba(0, 0, 0, .93);
     align-items: center;
     justify-content: center;
}

.gal_lightbox.gal_open {
     display: flex;
}

.gal_lightbox img {
     max-width: 94vw;
     max-height: 90vh;
     border-radius: var(--gal-radius);
     box-shadow: 0 0 80px rgba(0, 0, 0, .9);
     object-fit: contain;
}

.gal_lb_close {
     position: fixed;
     top: 1rem;
     right: 1.3rem;
     font-size: 2.5rem;
     color: #fff;
     cursor: pointer;
     opacity: .7;
     line-height: 1;
     transition: opacity .2s;
     user-select: none;
}

.gal_lb_close:hover {
     opacity: 1;
}