/* Markalar page: brands we are a dealer of (Views/Markalar/Index.cshtml). */

/* Brand picker: one image card per brand; the active card is in full colour with a filled line,
   the others stay muted until hovered. Clicking swaps the brand panel below (no page jump). */
.br-picker {
    display: grid;
    grid-template-columns: repeat(var(--br-count, 1), minmax(0, 1fr));
    gap: max(10px, 16rem);
    margin-top: max(30px, 70rem);
    margin-bottom: max(10px, 20rem);
}

.br-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: max(150px, 210rem);
    padding: max(16px, 24rem);
    overflow: hidden;
    color: #fff;
    background-color: var(--c1);
    isolation: isolate;
}

.br-pick-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: grayscale(1) brightness(.45);
    transform: scale(1.02);
    transition: filter .8s ease, transform 1.2s ease;
}

.br-pick:hover .br-pick-image {
    filter: grayscale(.4) brightness(.55);
    transform: scale(1.06);
}

.br-pick.active .br-pick-image {
    filter: grayscale(0) brightness(.6);
}

.br-pick-no {
    font-size: var(--f-xs);
    letter-spacing: .14em;
    opacity: .7;
}

.br-pick-name {
    font-size: var(--f-xl);
    line-height: 1;
    transition: transform .6s ease;
}

.br-pick.active .br-pick-name {
    font-family: var(--altfontitalic);
}

.br-pick-line {
    position: absolute;
    left: max(16px, 24rem);
    right: max(16px, 24rem);
    bottom: max(12px, 16rem);
    height: 1px;
    background-color: rgba(255, 255, 255, .25);
    overflow: hidden;
}

.br-pick-line i {
    position: absolute;
    inset: 0;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s ease;
}

.br-pick:hover .br-pick-line i {
    transform: scaleX(.25);
}

.br-pick.active .br-pick-line i {
    transform: scaleX(1);
}

/* Only the selected brand's panel is shown; it fades in when switched */
.br[hidden] {
    display: none;
}

.br.active {
    animation: br-in .6s ease both;
}

@keyframes br-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Intro ---------- */
.br-intro-section {
    padding-top: max(30px, 50rem);
    padding-bottom: max(40px, 70rem);
}

.br-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: max(30px, 100rem);
    align-items: start;
}

.br-logo {
    display: block;
    height: max(40px, 64rem);
    width: auto;
    max-width: 100%;
}

.br-name {
    font-size: var(--f-xl);
    line-height: 1;
}

.br-tagline {
    margin-top: max(24px, 40rem);
    font-size: var(--f-l);
    line-height: 1.15;
}

.br-links {
    margin-top: max(28px, 44rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: max(18px, 28rem);
}

.br-button {
    min-width: 220px;
}

.br-about p + p {
    margin-top: 1.1em;
}

.br-about p {
    line-height: 1.75;
    opacity: .8;
}

.br-about .br-lead {
    font-size: var(--f-m);
    line-height: 1.6;
    opacity: 1;
}

/* The whole image, at full width and its own height (nothing cropped). */
.br-banner {
    position: relative;
    margin-top: max(40px, 70rem);
    background-color: var(--c5);
}

.br-banner img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
}

/* ---------- History timeline ---------- */
.br-history {
    padding-top: max(40px, 70rem);
    padding-bottom: max(40px, 70rem);
}

.br-history .section-title {
    margin-bottom: max(30px, 50rem);
}

/* Year rail: thin line with year chips, scrolls sideways when it does not fit */
.br-years {
    position: relative;
    display: flex;
    gap: max(6px, 10rem);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: max(14px, 18rem);
    margin-bottom: max(28px, 40rem);
    border-bottom: var(--sl) solid var(--c3);
}

.br-years::-webkit-scrollbar {
    display: none;
}

.br-year {
    flex: none;
    appearance: none;
    border: 0;
    background: none;
    padding: 6px 10px;
    font: inherit;
    font-size: var(--f-xs);
    letter-spacing: .08em;
    color: var(--c1);
    opacity: .4;
    cursor: pointer;
    position: relative;
    transition: opacity .3s;
}

.br-year::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-1 * max(14px, 18rem) - 3px);
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background-color: var(--c1);
    transform: scale(0);
    transition: transform .3s;
}

.br-year:hover {
    opacity: .8;
}

.br-year.active {
    opacity: 1;
}

.br-year.active::after {
    transform: scale(1);
}

.br-event-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--c5);
}

.br-event-image img {
    transition: transform 1.2s ease;
}

.br-event:hover .br-event-image img {
    transform: scale(1.04);
}

.br-event-year {
    margin-top: max(18px, 24rem);
    font-size: var(--f-xl);
    line-height: 1;
}

.br-event-text {
    margin-top: max(10px, 14rem);
    font-size: var(--f-s);
    line-height: 1.65;
    opacity: .8;
}

.br-timeline-nav {
    display: flex;
    align-items: center;
    gap: max(16px, 24rem);
    margin-top: max(28px, 40rem);
}

.br-prev,
.br-next {
    appearance: none;
    border: 0;
    background: none;
    padding: 6px;
    color: var(--c1);
    cursor: pointer;
    opacity: .6;
    transition: opacity .3s;
}

.br-prev:hover,
.br-next:hover {
    opacity: 1;
}

.br-prev.swiper-button-disabled,
.br-next.swiper-button-disabled {
    opacity: .15;
    cursor: default;
}

.br-progress {
    position: relative;
    flex: 1;
    height: 1px;
    overflow: hidden;
    background-color: var(--c3);
}

.br-progress i {
    position: absolute;
    inset: 0;
    background-color: var(--c1);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s;
}

/* ---------- Factories ---------- */
.br-factories-section {
    padding-top: max(40px, 70rem);
    padding-bottom: max(40px, 70rem);
}

.br-factories-section .section-title {
    margin-bottom: max(30px, 50rem);
}

.br-factories-section .swiper-slide {
    height: auto;
}

/* Card fills the slide so the contact block lines up at the bottom across slides */
.br-factory {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.br-factory-image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--c5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.br-factory-image img {
    transition: transform 1.2s ease;
}

.br-factory:hover .br-factory-image img {
    transform: scale(1.04);
}

.br-factory-mark {
    font-size: var(--f-l);
    opacity: .35;
}

.br-factory-name {
    margin-top: max(18px, 24rem);
    font-size: var(--f-b);
    font-weight: 300;
    line-height: 1.15;
}

.br-factory-text {
    margin: max(10px, 12rem) 0 max(18px, 22rem);
    font-size: var(--f-s);
    line-height: 1.65;
    opacity: .8;
}

.br-factory-contact {
    margin: auto 0 0;
    padding-top: max(12px, 14rem);
    border-top: var(--sl) solid var(--c3);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    font-size: var(--f-xs);
}

.br-factory-contact dt {
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .5;
}

.br-factory-contact dd {
    margin: 0;
}

@media screen and (max-width: 1023.98px) {
    .br-intro {
        grid-template-columns: 1fr;
    }

    /* Picker scrolls sideways on small screens */
    .br-picker {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-right: calc(-1 * var(--wrapper-gutter, 16px));
    }

    .br-picker::-webkit-scrollbar {
        display: none;
    }

    .br-pick {
        flex: 0 0 min(78vw, 360px);
        scroll-snap-align: start;
    }

    .br-picker > .br-pick:only-child {
        flex-basis: 100%;
    }
}