/* ======================================================================
   items-grid.css
   ====================================================================== */
   
    
/* Common grid container and item rendering — used by featured-items, post-listing, mynewsdesk, etc. */

/*

.items-container.cards
.items-container.cards-icons
.items-container.cards-expandable
.items-container.cards-landscape
.items-container.list
.items-container.panel

.items-container set to grid if not .list or .panel

*/

.items-container[class*="cards"] {
    display: grid;
    grid-gap: var(--gap-grid);
    grid-template-columns: 1fr;
}


@media (min-width: 768px) {

    .items-container[class*="cards"]           { grid-template-columns: 1fr 1fr; }
    .items-container[class*="cards"].n1        { grid-template-columns: 1fr; }
    .items-container[class*="cards"].cards-landscape           { grid-template-columns: 1fr; }

}

@media (min-width: 1024px) {

    .items-container[class*="cards"]           { grid-template-columns: 1fr 1fr 1fr; }
    .items-container[class*="cards"].n2,
    .items-container[class*="cards"].n4        { grid-template-columns: 1fr 1fr; }
    .items-container[class*="cards"].cards-landscape           { grid-template-columns: 1fr 1fr; }
    .items-container[class*="cards"].cards-landscape.n1        { grid-template-columns: 1fr; }

}

@media (min-width: 1280px) {

    .items-container[class*="cards"]           { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .items-container[class*="cards"].n2        { grid-template-columns: 1fr 1fr; }
    .items-container[class*="cards"].n3,
    .items-container[class*="cards"].n5,
    .items-container[class*="cards"].n6,
    .items-container[class*="cards"].n9        { grid-template-columns: 1fr 1fr 1fr; }
    .items-container[class*="cards"].cards-landscape           { grid-template-columns: 1fr 1fr; }
    .items-container[class*="cards"].cards-landscape.n1        { grid-template-columns: 1fr; }
	
    /* --- List --- */
    .items-container.list .image-wrap {
        flex: 0 0 200px;
        width: 200px;
    }

    /* --- Panels --- */
	.items-container.panels .items-container {
		display: block;
		columns: 2;
		column-gap: var(--gap-grid);
	}
	.items-container.panels .item { margin-top: 4em; }
	.items-container.panels .item:first-child { margin-top: 8em; }
	.items-container.panels .item:nth-child(odd) { padding-left: 4em; }
	.items-container.panels .item:nth-child(n+3) .image-wrap { padding-right: 2em; }
	.items-container.panels .item:nth-child(even) { padding-right: 2em; }

    .items-container.panels .content-wrap {
		/*display: none; ??? */
    }
	
}



/* ----------------------------------------------------------------------
   Cards — equal-height cards
   ---------------------------------------------------------------------- */

.items-container[class*="cards"] .item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    padding: 0;
    text-decoration: none;
	
    display: flex;
    flex-flow: column;
    width: 100%;
}

/* Only override link colour on <a> items (prevents browser-default blue).
   Lower specificity than .item.bg-white so bg-class colours still win. */
.items-container[class*="cards"] a.item {
    text-decoration: none;
    color: inherit;
}
.items-container[class*="cards"] a:hover{
    text-decoration: none;
}

.items-container[class*="cards"] .image-wrap {
    width: 100%;
    overflow: hidden;
    margin: 0;
    background: url() no-repeat center center transparent;
    background-size: cover;
	
	aspect-ratio: 16/9;
}

.items-container[class*="cards"] .image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
}

.items-container[class*="cards"] .image-wrap.empty {
    display: none;
}

.items-container[class*="cards"] .content-wrap {
    flex: 1;
    display: flex;
    flex-flow: column;
    width: 100%;
    padding: var(--padding-card);
}

.items-container[class*="cards"] .content-wrap a:hover {
    text-decoration: underline;
}

.items-container[class*="cards"] .content-wrap .heading {
    margin-bottom: .5em;
}

.items-container[class*="cards"].content-wrap .heading h3 {
    margin: 0;
}

.items-container[class*="cards"] .content-wrap .heading h3 a {
    text-decoration: none;
    color: inherit;
}

.items-container[class*="cards"] .content-wrap .content {
    flex: 1;     /* Push button/read-more to bottom of card */
}

.items-container[class*="cards"] .content-wrap .button-wrap {
    margin-top: 1.5em;
}

.items-container[class*="cards"] .content-wrap .read-more-wrap {
    /*margin-top: 1em;*/
}

/* --- Link item hover --- */
a.item:hover .image-wrap img {
    transform: scale(1.04);
}

/* Fallback for link items without an image */
a.item:not(.has-image):hover {
    opacity: .85;
}

/* --- CTA indicator — persistent affordance on link items --- */

/* read-more link — clean text + sliding arrow, no border, no block padding */
.item-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    padding: .5em 26px .5em 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.item-cta::after {
    position: absolute;
    right: 0;
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%230b3b5b' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%230b3b5b' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center;
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
    transition: right 0.25s;
}

a.item:hover .item-cta::after {
    right: -5px;
}







/* ----------------------------------------------------------------------
   Cards — Landscape — horizontal card, image left + content right
   ---------------------------------------------------------------------- */

/* Mobile: stack vertically (inherits default card column layout) */

/* Tablet+: switch to horizontal layout */
@media (min-width: 768px) {

    .items-container.cards-landscape .item {
        flex-flow: row nowrap;
    }

    .items-container.cards-landscape .image-wrap {
        flex: 0 0 35%;
        width: 35%;
        aspect-ratio: auto;
    }

    .items-container.cards-landscape .image-wrap img {
        height: 100%;
        object-fit: cover;
    }

    .items-container.cards-landscape .content-wrap {
        flex: 1;
        width: auto;
        padding: var(--padding-card);
    }

}

/* Desktop: slightly wider image */
@media (min-width: 1024px) {

    .items-container.cards-landscape .image-wrap {
        flex: 0 0 30%;
        width: 30%;
    }

}

.items-container.cards-landscape .content-wrap p:last-child {
    margin-bottom: 0;
}







/* ----------------------------------------------------------------------
   Cards — Icons — smaller image treated as icon
   ---------------------------------------------------------------------- */

.items-container.cards-icons .item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.items-container.cards-icons .image-wrap {
	position: absolute;
	top: var(--padding-card);
	left: var(--padding-card);
	z-index: 2;
	display: block;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 4px;
	background: url() no-repeat center center transparent;
	background-size: 24px 24px;
	border-radius: 50%;
	transition: background .25s;
}

.items-container.cards-icons .image-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.items-container.cards-icons .item:hover .image-wrap {
	background-color: var(--ctx-surface);
}

.items-container.cards-icons .heading {
	height: 36px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding-left: 36px;	/* manually set - will differ from site to site */
}


/* ----------------------------------------------------------------------
   Cards — Expandable — cards with expand/collapse content
   ---------------------------------------------------------------------- */

.items-container.cards-expandable .item {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius);
    padding: 0;
    text-decoration: none;
    box-shadow: none;
    background: transparent !important;
}

.items-container.cards-expandable .item .panel-wrap {
    position: relative;
    border-radius: var(--border-radius);
}

html.js .cards-expandable .item.has-more {
    cursor: pointer;
}

html.js .cards-expandable .item.has-more .content-wrap {
    position: relative;
    max-height: 260px;
    padding-bottom: 48px;
    overflow: hidden;
    transition: max-height .4s ease;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

html.js .cards-expandable .item.has-more.active .content-wrap {
    height: auto;
    max-height: 1200px;
    transition: max-height .5s ease;
}

/* click indicator (+/- icon) */
html.js .cards-expandable .item.has-more .content-wrap::after {
    position: absolute;
    left: var(--padding-card);
    bottom: var(--padding-card);
    z-index: 200;
    display: block;
    width: 24px;
    height: 24px;
    content: "";
    border-radius: 50%;
    background: no-repeat center center var(--ctx-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %230b3b5b; stroke-width: 2; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3Cline class='cls-1' x1='12' y1='18' x2='12' y2='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 24px 24px;
    transition: transform .4s;
}

html.js .cards-expandable .item.active.has-more .content-wrap::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %230b3b5b; stroke-width: 2; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3C/svg%3E");
    transform: rotate(180deg);
}

/* item background — applied to inner wraps so item doesn't grow on expand */
.items-container.cards-expandable .item.bg-white .content-wrap,
.items-container.cards-expandable .item.bg-white .image-wrap { background: var(--ctx-bg); color: var(--ctx-fg); }
.items-container.cards-expandable .item.bg-lightgray .content-wrap,
.items-container.cards-expandable .item.bg-lightgray .image-wrap { background: var(--ctx-bg); color: var(--ctx-fg); }
.items-container.cards-expandable .item.bg-darkblue .content-wrap,
.items-container.cards-expandable .item.bg-darkblue .image-wrap { background: var(--ctx-bg); color: var(--ctx-fg); }

/* gradient cover */
html.js .cards-expandable .item.has-more .panel-wrap::before {
    position: absolute;
    bottom: 0;
    z-index: 20;
    width: 100%;
    height: 180px;
    content: "";
    background: linear-gradient(0deg, rgba(255,255,255,1) 54px, rgba(255,255,255,0) 100%);
    transition: opacity .4s ease-out;
    border-radius: var(--border-radius);
}

html.js .cards-expandable .item.bg-white .panel-wrap::before { background: linear-gradient(0deg, rgba(255,255,255,1) 54px, rgba(255,255,255,0) 100%); }
html.js .cards-expandable .item.bg-lightgray .panel-wrap::before { background: linear-gradient(0deg, rgba(248,249,250,1) 54px, rgba(248,249,250,0) 100%); }
html.js .cards-expandable .item.bg-darkblue .panel-wrap::before { background: linear-gradient(0deg, rgba(11,59,91,1) 54px, rgba(11,59,91,0) 100%); }

/* gradient cover hide on active */
html.js .cards-expandable .item.active.has-more .panel-wrap::before {
    opacity: 0;
    transition: opacity .4s ease-in;
}


/* ----------------------------------------------------------------------
   List — horizontal, image left content right
   ---------------------------------------------------------------------- */

.items-container.list .items-container {
    display: flex;
    flex-flow: column;
	gap: var(--gap-grid);
}

.items-container.list .item {
    flex-flow: row;
    align-items: flex-start;
	gap: var(--gap-grid);
}

.items-container.list .image-wrap {
    flex: 0 0 120px;
    width: 120px;
}

.items-container.list .image-wrap img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.items-container.list .content-wrap {
    padding: 0;
}


/* ----------------------------------------------------------------------
   Panels — full width stacked, alternating image/text
   ---------------------------------------------------------------------- */

.items-container.panels .items-container {
    display: flex;
    flex-flow: column;
    gap: var(--gap-grid);
}

.items-container.panels .item {
    flex-flow: row;
    align-items: stretch;
    width: 100%;
}

.items-container.panels .image-wrap {
	width: 100%;
    aspect-ratio: auto;
}

.items-container.panels .image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Alternate image side on even panels */
.items-container.panels .item:nth-child(even) {
    flex-direction: row-reverse;
}