/* Transitions */

:is(.station-name, .station-distance, .station-source, 
.last-frost-date, .first-frost-date, .freeze-free-days, td) > * {
    display: inline-block;
    width: fit-content;
    transition: all .8s var(--back-out);
    transition-behavior: allow-discrete;
    @starting-style {
        background-color: yellow;
        opacity: 0;
        /* height: 0; */
    }
}

:host :is(.header, .footer) :where(button, .button) {
    transition: all .6s var(--back-out);
    transition-behavior: allow-discrete;

    @starting-style {
        opacity: .5;
        opacity: 0;
        filter: brightness(0.9);
        pointer-events: none;
    }
}


/* Tables */

.tables {

    .tables-inside {
        padding-block: 1lh;
        gap: 2lh;
        position: relative; 
        justify-content: space-evenly;
        justify-content: space-between;
    }

    h3 {
        margin-block-start: 0;
    }

    .table-wrapper {
        /* @container (width < 768px) { */
        @container (width < 800px) {
            width: 100%;
            max-width: 30em;

            td {
                min-width: 1lh;
            }
        }
    }
}

table {
    background: Canvas;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;

    table-layout: auto;
    width: 100%;

    transition: all .6s ease-in-out;
    transition-behavior: allow-discrete;
    /* @starting-style {
        opacity: 0;
        height: 0;
    } */
    /* :is(freeze-dates:not([station-id]) table) {
        display: none;
    } */
}

thead th {
	box-shadow: var(--surface-inset);
}

th, td {
    border: solid 1px #ddd;
    text-align: center;
}

th {
    /* text-align: left; */
    padding: 15px var(--spacing);
    background-color: #f5f5f5;
}

td {
    padding: 15px var(--spacing);
    padding-inline: 3cqi;
    min-width: 4lh;
    min-width: 3.75lh;
    min-width: min(calc(3lh + 3cqi), 4lh);
    /* min-width: calc(3lh + 2cqi); */
}


/* 🔒 Location overlay */
:host([station-id]) .location-lock { display: none; }
.location-lock {
    /* Works in all browsers but breaks with WP Rocket minimization: */
    /* :host([station-id]) & { display: none; } */

    position: absolute;
    inset: .25lh -.25lh;
	display: grid;
	/* align-items: start;
	padding-block-start: 4lh; */
    /* align-items: end; */
	/* padding-inline: 1.5lh; */
	/* padding-block-end: 1.5lh; */
	/* padding-block-end: .75lh; */
    align-items: center;
	justify-content: center;
	background: #00000096;
	box-shadow: 
        inset 0 1.5px 0 0 #ffffff60,
        inset 0 -1.5px 0 0 #ffffff40;
	border-radius: 5px;
	transition: background-color .9s var(--back-out);
	text-decoration: none;
    /* backdrop-filter: blur(1px); */
    /* position: relative; */
    /* isolation: isolate; */
    overflow: clip;
    z-index: 2;

    /* @media (width < 768px) {
        align-items: start;
	    padding-block: 1lh;
    } */

    h1, h2, h3, h4, h5, h6, p {
        color: #fff;
        text-wrap: balance;
        /* max-width: min(34ch, 100%); */
        text-shadow: 
            1px 1px 0px #000, 
            1px 1px 2px #000, 
            1px 1px 3px #000, 
            1px 1px 6px #00000080, 
            1px 1px 12px #000000a0;
		text-shadow: 
            1px 1px 0px #00000020, 
            1px 1px 2px #00000020, 
            1px 1px 3px #00000020, 
            1px 1px 6px #00000020, 
            1px 1px 9px #00000040;
        /* font-weight: bold; */
        letter-spacing: .01em;
        letter-spacing: .005em;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 1.75rem;
        font-size: 175%;
        line-height: 1.2;
        font-weight: normal;
        margin-block: .25lh 0;
    }

    small { 
        font-weight: normal; 
        font-size: 75%;
        line-height: 1.25;
    }

    big {
        font-weight: bold;
        line-height: 1;
		margin-top: 1px;
    }

    header, footer {
        text-align: center;
    }
}

/* 🔒 Surface inside location overlay */
.surface {
    display: grid;
    gap: .5lh;
    /* background: #b2b2b280; */
    /* background: #ffffff80; */
    background-image: linear-gradient(180deg, #ffffff80, #7f7f7f80);
    background-image: linear-gradient(174deg, #ffffff90, #7f7f7f90);
	backdrop-filter: blur(3px);
	box-shadow: 
        inset 0 1px 0 0 #ffffff30,
        inset 0 -1.5px 0 0 #ffffff07,
        var(--shadow-3);
	padding-block: .25lh .5lh;
    padding-inline: .75lh;
	width: calc(100vw - 1lh);
    max-width: calc(100cqw - 1lh);
	margin-inline: auto;
	border-radius: 8px;
	text-wrap: pretty;
    z-index: 1;
    transition: translate .6s var(--back-out), opacity .3s var(--back-out);
    transition: all .8s var(--back-out);
    transition-behavior: allow-discrete;

    @starting-style {
        opacity: .5;
        translate: 0 1.5lh;
    }

    /* @container (width < 768px) { */
    @container (width < 800px) {
        align-self: start;
        margin-block: 1lh;
        width: min(100%, 23rem);
        position: sticky;
		top: 1lh;
    }

    footer > * {
        margin-block: .25lh .75lh;
		line-height: 1.25;
		text-wrap: pretty;
    }

}


/* Cards */

/* Container of the Cards Wrapper */
*:has(> * > .card) {
	container: cards / inline-size;
}

/* Cards Wrapper */
:where(:has(> .card)) {
	display: flex;
	gap: 1lh;

	@container cards (width < 600px) {
		flex-wrap: wrap;
	}
}

/* Location Cards */
.location-cards {
    -webkit-font-smoothing: antialiased;
    padding-inline: 1.5lh;
    padding-inline: .25lh;
    transition: all .3s var(--back-out);
    /* outline: dashed 2px transparent; */
    outline-offset: .25lh; 
    gap: .5lh;
}

.card {
    /* min-height: 3.75lh; */
	background-color: #eaeaea;
	background-color: #eaeaeaa0;

    /* shiny cursor */
    background-attachment: fixed;
    background-image: radial-gradient(
        circle at var(--x, 0%) var(--y, -100%),
        #ffffffbf,
        #ffffff40 5rem
    );
    /**/

	border: solid 1px #dadada;
	border: solid 1px #dadada80;
	border-radius: 5px;
	padding: 0.5lh 0.75lh;
	gap: 0.5lh;
	width: 100%;
    width: 100%;
	max-width: 20em;
    margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
    box-shadow: var(--surface-inset-200);

    @container cards (650px < width) {
        text-align: right;
        &:nth-child(1){
            .button { flex-direction: row-reverse; }
        } 
        &:nth-child(3) {
            flex-direction: row-reverse;
            text-align: left;
        }
    }

	@container cards (600px < width < 900px) {
		flex-wrap: wrap;
	}

	@container cards (width < 600px) {
		flex-wrap: wrap;
        & + .separator { width: 100%; }
	}

    & + .separator {
        display: grid; 
        align-items: center; 
        text-wrap: nowrap; 
        font-weight: bold; 
        justify-content: center;
        margin-block: 0;
    }

    &[data-variation=no-card] {
        background: none;
        padding: 0;
        border: 0;
        display: grid;
        /* align-content: center; */
		/* justify-content: end; */
    }

	& > :first-child {
        flex: 1;
		display: grid;
        gap: .1lh;
	}

    ul {
        margin: 0;
        font-size: 80%;
        font-size: smaller;
        padding-inline-start: .75lh;
    }
}

/* Last child (card) takes up whole space if total items is odd */
/* .card:nth-child(2n + 1):last-child {
	grid-column: 1 / -1;
} */


/* Misc. */

.geo-locate[aria-busy=true] {
    cursor: default; /* loading cur gets stuck in Chrome */
}

.header {
    display: flex;
    gap: 1lh; row-gap: .4lh;
    align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.first-heading {
    margin: 0;
	padding: .25lh 0;
    /* border-bottom: 1px solid #ccc; */
	/* flex-grow: 1; */
    padding-inline-end: .5lh;
	text-box: trim-both cap alphabetic;
}

.footer {
    display: flex; 
    flex-wrap: wrap; 
    gap: 1lh;
    row-gap: .5lh;
    margin-block-start: 1lh; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 100%;
}

.station-meta {
    width: fit-content;
	display: block;
    outline-offset: 3px;
}


/* Lazy Modal */
lazy-modal:not(:defined) { display: none; }