/* Both sections now run full-bleed and carry the band colour; `.container-sm`
   moved to an inner wrapper in the two partials, so the content keeps its 1590
 *
   max-width and 40px gutter while the colour reaches the viewport edges. */
#media-tab-section,
#media-filter {
    background-color: rgb(209 192 171 / 0.15);
}

#media-tab-section {
    padding-top: clamp(2.5rem, 1.55rem + 4.75vw, 7.25rem);
    padding-bottom: clamp(4.375rem, 4.125rem + 1.25vw, 5.625rem);
}

.media-tab__ul{
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* The tabs are separated by a real gap now, not by inline padding on each
       item. 29 at 375 up to 97 at 1920 — the middle term is the line through
       those two points, so its constant is `min - (max - min) * 375 / 1545`.

       The `:first-child { padding-left: 0 }` / `:last-child { padding-right: 0 }`
       pair that used to trim the outer edges is gone with the padding it
       corrected; a gap only ever sits BETWEEN items, so the row still starts and
       ends flush with the container.

       Below 545 this is overridden by the wrapped chip layout further down,
       which keeps its own 18px gap and its own item padding. */
    gap: clamp(29px, calc(12.4951px + 4.40130vw), 97px);
}

.media-tab__ul li {
    cursor: pointer;
    color: #B96346;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.4;
    font-family: classico-urw;
    position: relative;
    font-weight: 500;
    letter-spacing: 2.2px;
}

/* .media-tab__ul li::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 41px;
    top: 0;
    right: 0;
    background-color: #B96346;
} */

.media-tab__ul li span {
    opacity: 0.4;
}

.media-tab__ul li {
    padding-bottom: 4px;
}

.media-tab__ul li.active {
    border-bottom: 1px solid #B96346;
}

/* .media-tab__ul li:last-child::before{
    width: 0;
} */

.media-tab__ul li.active span{
    opacity: 1;
}

ul.media-item__ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.media-filter__message {
    font-size: 16px;
    line-height: 1.1;
}

.media-item-row {
    display: grid;
    grid-template-columns: 350px auto;
    gap: 28px;
}

.media-item-img img {
    width: 100%;
    object-fit: cover;
    max-width: 100% !important;
}

.media-item__list-layout .media-item-img img {
    height: auto !important;
}

.media-item__grid-layout .media-item-img img {
    height: auto !important;
    aspect-ratio: 16 / 9;
}

.media-item-img {
    display: flex;
}

.media-item__list-layout.media-item__ul li {
    padding-bottom: 40px;
    padding-top: 40px;
}

/*
 * Separator rules across the Media views: 0.5px #000000, per the design.
 * Was 1px #707070 — a heavier, mid-grey line than the artboards draw.
 * Applied identically to the list separator, the grid's row and column rules,
 * and the mobile override below, so Media, Media Releases, Events and Socials
 * all match at every breakpoint.
 */
.media-item__ul.media-item__list-layout li{
    border-bottom: 0.5px solid #000000;
}

.media-item__list-layout.media-item__ul li:first-child {
    padding-top: 0px;
}

.media-item__list-layout.media-item__ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.media-item-date {
    display: flex;
    align-items: center;
    gap: 10px;
}

.media-item-date-span {
    color: black;
    opacity: 0.5;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    font-size: 16px;
}

.media-item-date svg path {
    stroke: black;
    opacity: 0.5;
}

.media-item-content{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.media-tab__btn-style {
    display: inline-flex;
    background: url(../images/shape-top.png);
    position: relative;
    background-size: contain;
    width: 113px;
    height: 187px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.media-tab__btn-style-btn {
    color: white;
    display: flex;
    margin: auto;
    margin-top: 32px;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    font-size: 22px;
    font-family: classico-urw;
    font-weight: 500;
}

.media-tab__btn-wrapper {
    display: flex;
    justify-content: right;
    margin-top: 55px;
}

.media-tab-response-wrapper{
    position: relative;
}

.ajax-loader {
    /*
     * The scrim the legacy theme shipped with — it is in the first committed
     * version of this file and was commented out later, which is why the
     * spinner started floating over fully-legible results while a filter or
     * tab switch was still in flight.
     *
     * It does the work the spinner alone cannot: it greys the stale list back,
     * so the reader can see at a glance that what is on screen is no longer
     * current. 0.9 rather than opaque, so the layout underneath still reads and
     * the panel does not appear to blank out between filters.
     */
    /*
     * Legacy shipped this as flat rgba(255,255,255,0.9), which worked there
     * because that site's media page sat on a white canvas. The redesign puts
     * it on the sand-tint surface, so a pure-white scrim read as a lighter
     * rectangle sitting proud of the page rather than a wash over it.
     *
     * Rebuilt from the same two layers the surface itself is made of: the sand
     * tint over the page canvas. The white layer carries the 0.9, which is what
     * lets the stale list stay faintly readable underneath.
     *
     * Literals rather than `var(--stds-bg-sand-tint)` on purpose — this is
     * legacy markup that sits outside `.stds`, where those tokens are scoped, so
     * the var resolves to nothing and takes the whole declaration down with it,
     * leaving no scrim at all. Value mirrors design-system.css:64.
     */
    background: linear-gradient(rgb(209 192 171 / 0.15), rgb(209 192 171 / 0.15)),
                rgb(255 255 255 / 0.9);
    z-index: 999;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

span.loader-01 {
    margin: auto;
    margin-top: 0px;
}

.loader-01 {
    width: 48px;
    height: 48px;
    border: 3px dotted #000;
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 2s linear infinite;
    animation: rotation 2s linear infinite;
}

.loader-01:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px dotted #b06347;
    border-style: solid solid dotted;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    -webkit-animation: rotationBack 1s linear infinite;
    animation: rotationBack 1s linear infinite;
    transform-origin: center center;
}

.media-tab-flex-col {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 1.6875rem + 4.0625vw, 6.5625rem);
}

.media-item-title{
    font-size: 28px;
    color: #B96346;
}

.media-item-img a {
    display: flex;
    width: 100%;
}

.media-item__grid-layout .media-item-row{
    grid-template-columns: 1fr;
}

.media-item__grid-layout.media-item__ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.media-item__grid-layout.media-item__ul li .media-item-box {
    padding: 54px 34px;
    height: 100%;
}

.media-item__grid-layout.media-item__ul li:nth-child(-n+3) .media-item-box {
    padding-top: 0px;
}

.media-item__ul.media-item__grid-layout li .media-item-box {
    border-bottom: 0.5px solid #000000;
}
  
.is-last-row .media-item-box {
    border-bottom: none !important;
}

.media-item__ul.media-item__grid-layout li:nth-child(3n + 1) .media-item-box,
.media-item__ul.media-item__grid-layout li:nth-child(3n + 2) .media-item-box {
  border-right: 0.5px solid #000000;
}

/* Remove border if total items ≤ 3 */
.media-item__ul.media-item__grid-layout:has(> li:nth-child(3):last-child) li .media-item-box,
.media-item__ul.media-item__grid-layout:has(> li:nth-child(2):last-child) li .media-item-box,
.media-item__ul.media-item__grid-layout:has(> li:only-child) li .media-item-box {
  border-bottom: none !important;
}

.media-item__grid-layout{
    margin-inline: -34px !important
}
.media-filter-items-response__wrapper{
    overflow: hidden;
}


/* CPT FILTER BLOCK */
.media-filter__container {
    padding-top: clamp(3.4375rem, 2.9875rem + 2.25vw, 5.6875rem);
    padding-bottom: clamp(80px, calc(80px + 22.833vw), 300px);
}
.media-filter__heading {
    font-size: clamp(1.75rem, 1.225rem + 2.625vw, 4.375rem);
    text-transform: uppercase;
    color: #B96346;
    line-height: 1.2;
    margin-bottom: 57px;
}

.media-filter__ul {
    list-style-type: none;
    padding: 0px;
    margin: 0;
    display: grid;
    grid-template-columns: 48% 1fr 1fr;
}

.media-filter__ul li {
    padding: 0px 20px;
}

.media-filter__ul li:first-child {
    padding-left: 0px;
}

.media-filter__ul li:last-child {
    padding-right: 0px;
}

.media-filter__ul-row {
    position: relative;
}

.media-load__more-btn[data-disabled="1"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

#search__title {
    background: white;
    border: none;
    border-bottom: 1px solid #b06347 !important;
    font-size: 19px;
    color: #000000;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    font-family: 'Baskerville';
}

#search__btn {
    border: none;
    width: 23px;
    height: 35px;
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    bottom: 0;
    margin: auto;
}

#search__title::placeholder {
    opacity: 0.3;
}
.search-style__box {
    position: relative;
}

.search-select__box {
    width: 100%;
    height: 50px;
    border: none;
    border-bottom: 1px solid #b06347 !important;
    font-size: 18px;
    color: #000000;
    text-transform: uppercase;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: white;
    font-family: 'Baskerville';
}

.search-select__box option {
    font-size: 18px;
}

.search-style__box::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 17px;
    padding-left: 12px;
    background: white;
    color: #C8CACB;
    pointer-events: none;
    margin: auto;
    display: flex;
    align-items: center;
}

.search-select__box:focus-visible {
    outline: none;
}

#search__title:focus-visible {
    outline: none;
}

.media-filter__bar{
    margin-bottom: clamp(2.8125rem, 2.2625rem + 2.75vw, 5.5625rem);
}

.media-filter__response-wrapper {
    position: relative;
}

.load__more-loader .spinner {
    width: 48px;
    height: 48px;
    border: 5px dotted #707070;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 2s linear infinite;
    animation: rotation 2s linear infinite;
}

.load__more-loader {
    display: none;
    justify-content: center;
    margin-top: 25px;
}

.media-tab__flex {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.media-tab__view {
    display: flex;
    gap: 40px;
}

.media-tab__view-btn {
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 6px;
    cursor: pointer;
}

.media-tab__flex-right {
    margin: auto 0;
}

.media-tab__view-btn.active {
    background-color: #e0e0e0;
}

.media-tab__flex-fil {
    display: grid;
    grid-template-columns: auto 10%;
    gap: clamp(1.125rem, 0.4125rem + 3.5625vw, 4.6875rem);
}

.media-tab__flex-fil-right {
    display: flex;
    justify-content: right;
    align-items: center;
}


@media only screen and (max-width: 1281px) {
    /* Filter */
    #search__title{
        font-size: 16px;
    }
    #search__btn{
        width: 32px;
        height: 48px;
    }
    .media-filter__ul {
        grid-template-columns: 50% 1fr 1fr;
    }
    .media-filter__ul li {
        padding: 0px 12px;
    }
    .search-select__box, .search-select__box option {
        font-size: 14px;
    }
    .search-style__box::after {
        font-size: 16px;
        padding: 9px 8px;
    }
}

@media only screen and (max-width: 1025px) {
    .media-tab__ul li {
        font-size: 18px;
    }
    .media-tab__ul li::before {
        height: 29px;
    }
    .media-item-row {
        grid-template-columns: 220px auto;
        gap: 25px;
    }
    .media-item-title {
        font-size: 22px;
    }
    .media-item-content {
        gap: 14px;
    }
    .media-tab__btn-wrapper {
        margin-top: 40px;
    }
    .media-tab__btn-style-btn {
        font-size: 14px;
        margin-top: 25px;
    }
    .media-tab__btn-style {
        width: 81px;
        height: 138px;
    }
    .media-item-img img {
        min-height: 160px;
    }
    .media-item__grid-layout.media-item__ul li .media-item-box {
        padding: 35px 15px;
    }
    .media-item__grid-layout{
        margin-inline: -15px !important;
    }
    .media-tab__view-btn svg {
        width: 15px;
    }

    .media-tab__view-btn {
        padding: 3px 7px;
    }

    /* Filter */
    #search__title{
        font-size: 16px;
    }
    #search__btn{
        width: 19px;
        height: 45px;
    }
    .media-filter__ul {
        grid-template-columns: 38% 1fr 1fr;
    }
    .media-filter__ul li {
        padding: 0px 10px;
    }

}

@media only screen and (max-width: 767px) {
    .media-item__grid-layout.media-item__ul {
        grid-template-columns: 1fr;
        margin-inline: 0 !important;
    }
    .media-item__grid-layout.media-item__ul li:nth-child(2)  {
        border-left: none;
        border-right: none;
    }
    .media-item__grid-layout.media-item__ul li .media-item-box {
       padding: 40px 0;
    }

    .media-item__ul.media-item__grid-layout li:nth-child(3n + 1) .media-item-box, .media-item__ul.media-item__grid-layout li:nth-child(3n + 2) .media-item-box {
        border-right: none;
    }

    .media-item__grid-layout.media-item__ul li:nth-child(-n+3) .media-item-box {
        padding-top: 40px;
    }

    .media-item__grid-layout.media-item__ul li:first-child .media-item-box{
        padding-top: 0;
    }

    .media-item__grid-layout.media-item__ul li {
        padding-left: 0;
        padding-right: 0;
    }


    .media-item__ul.media-item__grid-layout:has(> li:nth-child(3):last-child) li .media-item-box,
    .media-item__ul.media-item__grid-layout:has(> li:nth-child(2):last-child) li .media-item-box,
    .media-item__ul.media-item__grid-layout:has(> li:only-child) li .media-item-box {
        border-bottom: 0.5px solid #000000 !important;
    }

    /* Filter */
    .media-filter__ul{
        grid-template-columns: 1fr;
    }
    .search-select__box{
        font-size: 15px;
        height: 44px;
    }
    .search-select__box option {
        font-size: 15px;
    }
    #search__title{
        font-size: 15px;
        height: 44px;
    }
    #search__btn{
        width: 17px;
        height: 28px;
    }
    .media-filter__ul li {
        padding: 5px 0;
    }
    .search-style__box::after{
        font-size: 15px;
        padding: 6px 8px;
    }

    .media-filter__heading {
        margin-bottom: 25px;
    }

    .load__more-loader .spinner {
        width: 36px;
        height: 36px;
        border: 3px dotted #707070;
    }

    .media-tab__flex-fil {
        grid-template-columns: 1fr;
    }

    /* List and Grid view */
    .media-tab__view {
        display: none;
    }

    .media-item-row {
        grid-template-columns: 1fr;
    }

    .media-tab__btn-wrapper {
        justify-content: center;
    }

}

@media only screen and (max-width: 545px) {
    .media-tab__ul {
        flex-wrap: wrap;
        gap: 18px;
        justify-content: start;
    }
    .media-tab__ul li  span {
        opacity: 1;
    }
    .media-tab__ul li {
        font-size: 12px;
        border-bottom: 1px solid #B96346;
        opacity: 0.4;
        letter-spacing: 0.72px;
    }
    /* .media-item-row {
        grid-template-columns: 1fr;
    } */
    .media-tab__ul li::before{
        width: 0;
    }
    .media-tab__ul li.active{
        opacity: 1;
    }
    .media-item-img img {
        min-height: 155px;
    }
    .media-item-row {
        gap: 22px;
    }
    .media-item-title {
        font-size: 20px;
        line-height: 1.2;
    }
    .media-item-content {
        gap: 16px;
    }
    .media-tab__btn-style-btn {
        font-size: 13px;
        margin-top: 21px;
    }
    .media-tab__btn-style {
        width: 71px;
        height: 119px;
    }

    .media-item-date-span {
        font-size: 13px;
    }

    .media-tab__flex {
        flex-direction: column;
    }

    .media-tab__view {
        justify-content: right;
        gap: 4px;
    }

    .media-tab__view-btn svg {
        width: 15px;
    }

    .media-tab__view-btn {
        padding: 3px 7px;
    }

}


/* ==========================================================================
   Filter bar on the #D1C0AB band
   Appended last on purpose: the size overrides at 1281 / 1025 / 767 / 545
   above set 14-16px on these controls, so a base rule placed earlier would be
   beaten by them. Everything below therefore carries its own ramp.
   ========================================================================== */

#search__title,
.search-select__box,
.search-select__box option {
    font-family: classico-urw;
    font-size: clamp(0.9375rem, 0.8314rem + 0.4531vw, 1.375rem);
    letter-spacing: clamp(0rem, -0.01rem + 0.0427vw, 0.04125rem);
}

#search__title,
.search-select__box,
.search-style__box::after {
    background: transparent;
}

#search__title::placeholder {
    color: #000000;
    opacity: 0.45;
}

/* --- dropdown chevron --------------------------------------------------- */
.search-style__box::after {
    content: "";
    width: clamp(0.75rem, 0.6893rem + 0.2589vw, 1rem);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS4yNDgiIGhlaWdodD0iMTYuNzY4IiB2aWV3Qm94PSIwIDAgMjEuMjQ4IDE2Ljc2OCI+CiAgPHBhdGggaWQ9IlBhdGhfNTI3NTIiIGRhdGEtbmFtZT0iUGF0aCA1Mjc1MiIgZD0iTTIwLjYzNCwxLjRsLTEwLDE1LTEwLTE1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC4wMSAtMC45ODkpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    padding: 0;
    margin-left: 12px;
}

/* --- grid / list view icons --------------------------------------------- */
.media-tab__view-btn {
    color: #B96346;
    opacity: 0.3;
}

.media-tab__view-btn.active {
    opacity: 1;
    /* The grey pill behind the active button is not in the design. */
    background-color: transparent;
}

/* Rendered at the export's own dimensions — list 39.369 x 31.5, grid
   32.499 x 32.5 — so the two keep the different aspect the design gives them
   rather than being squared off to a single box. Ramped down for small
   screens; declared here, after the 1025 and 545 blocks above, because those
   set a flat `svg { width: 15px }` on both. */
.media-tab__view-btn[data-view="list"] svg {
    width: clamp(24px, calc(20.2696px + 0.99476vw), 39.369px);
    height: auto;
}

.media-tab__view-btn[data-view="grid"] svg {
    width: clamp(20px, calc(16.9662px + 0.80900vw), 32.499px);
    height: auto;
}