/* Plant archive — base layout scaffold.
   Fill in exact colors/spacing/typography from your Figma file;
   this establishes structure and the responsive behavior only. */

.plant-archive {
  --border-colour:#D9D9D9;
  --border: 2px solid #D9D9D9;
  --border-2: 1.2px solid #AAC272;
  /* --plant-archive-grid-bg: #ECF2E0; */
  --plant-archive-grid-bg: #edf0e7;
  margin-top: 200px;
  width: 100%;
}

.plant-archive__body {
	display: grid;
	grid-template-columns: 260px 1fr;
	/* gap: 2rem; */
  /* background: #FAF8F8; */
  /* background: aqua; */
}

.plant-archive__header {
  text-align: center;
  border-bottom: var(--border);
  padding-top: 1.6rem;
  padding-bottom: 1rem;
}

#archive-contact-link {
    color: var(--plant-link-blue);
}

.plant-archive__filters {
  padding: 1.6rem;
}

.plant-filter-panel {
  display: flex;
  flex-direction: column;
  /* gap: 1.2rem; */
}

.plant-filter-panel__heading {
  font-size: x-large;
  font-weight: 700;
  padding-bottom: 1rem;
  /* border-bottom: var(--border-2); */
  margin-bottom: 0 !important;
}

.plant-filter-group__summary {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: .9rem;
  padding-bottom: .3rem;
  border-top: var(--border-2);
  cursor: pointer;
}

.plant-archive__filters--desktop {
	display: block;
  border-right: var(--border);
}

.plant-filter-group__options {
  display: flex;
  flex-direction: column;
  padding-left: .5rem;
  padding-bottom: .7rem;
  gap: .2rem;
}

.plant-filter-option:hover,
.plant-filter-option input:hover {
  cursor: pointer;
}

.plant-filter-option input {
  margin-right: .3rem;
}

.plant-filter-option {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.plant-filter-option input[type="checkbox"] {
	margin: 0.32rem 0 0; /* nudge down slightly to align with the first line of text */
	flex-shrink: 0;
}

.plant-filter-option__label {
	flex: 1;
}

.plant-filter-option--child {
    margin-left: 1.25rem;
}

.plant-filter-panel__clear {
  background-color: var(--base) !important;
  margin-top: 1rem;
  color: var(--contrast) !important;
  border-radius: 0 !important;
  font-weight: 500;
}

.plant-filter-panel__clear:hover, 
.plant-filter-panel__clear:focus {
  background-color: var(--base-2) !important;
}


.plant-archive__filters-toggle {
	display: none;
}

.plant-archive__main-top {
  padding: 1.6rem 1.6rem .8rem 1.6rem;
  border-bottom: var(--border);
}

.plant-archive__controls {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.plant-archive__label {
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: .2rem;
}


.plant-archive__toggle-filter-sort {
    width: 30%;
}

.plant-archive__search,
.plant-archive__sort {
  display: flex;
  flex-direction: column;

}

.plant-archive__search input,
.plant-archive__sort select {
  background-color: #fff !important;
}

.plant-archive__search input:focus {
  background-color: var(--base) !important;
}

.plant-archive__search input:focus,
.plant-archive__sort select:focus {
  border-color: var(--base) !important;
}

.plant-archive__sort select {
  cursor: pointer;
}

.plant-archive__search {
  width: 70%;
}

.plant-archive-search {
  line-height: normal;
}

.plant-archive__sort {
  /*width: 30%;*/
}


.plant-archive__results-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 1.6rem;
}

.plant-archive__results-meta > p {
  margin-bottom: 0;
}

#plant-grid-and-pagination-wrap {
    height: 100%;
    background-color: var(--plant-archive-grid-bg);
}

#plant-grid-wrap {
  padding: 1.5rem;
  /* background-color: #ECF2E0; */
  background-color: var(--plant-archive-grid-bg);
}

/* Loading state: subtle dimming while an AJAX request is in flight */
#plant-grid-wrap.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.plant-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8rem;
  
}

.plant-tile {
	display: block;
	text-decoration: none;
	color: inherit;
  background-color: #FAF8F8;
  box-shadow: 4px 4px 8px rgb(0,0,0, .25);
  transition: translate 10ms ease;
}

.plant-tile:hover {
  translate: -2px -2px;

}

.plant-tile__image img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	display: block;
}

.plant-tile__body {
	padding: 1rem;
  color: var(--contrast);
}

.plant-tile__body > * {
  margin-block-end: 0 !important;
}

.plant-tile__first {
	/* font-size: x-large; */
  font-family: 'Lora', serif;
	font-weight: 700;
	
}

.plant-tile__second {
  margin-top: .3rem;
  font-size: 1.3rem;
}

.plant-tile__latin {
  margin-top: .25rem;
	/* color: #555; */
}

.plant-archive__pagination {
  background-color: var(--plant-archive-grid-bg);
}

.plant-archive__pagination-nav {
  display: flex;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
  text-decoration: none;
}

.plant-archive__pagination-nav a, 
.plant-archive__pagination-nav .current {
  font-size: xx-large !important;
  text-decoration: none;
}

.plant-archive__pagination-nav a {
 color: var(--plant-link-blue);
 text-decoration: underline;
 font-weight: 300 !important;
}


.plant-archive__pagination-nav a:hover {
  text-decoration: underline;
}

/* Mobile drawer: hidden by default via [hidden], shown as an overlay when toggled */
.plant-archive__filters-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: #fff;
	overflow-y: auto;
}

.plant-archive__filters-drawer[hidden] {
	display: none;
}

body.plant-drawer-open {
	overflow: hidden; /* prevent background scroll while drawer is open */
}

.plant-archive__filters-drawer-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	background: none;
	border: none;
}

@media (prefers-reduced-motion: reduce) {
  .plant-tile:hover {
    translate: none;
    filter: brightness(1.2);
    
  }
}

@media (max-width: 1179px) {
	.plant-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	} 
	/*.plant-archive__sort {*/
 /*     width: 100%;*/
 /*   }*/
}


@media (max-width: 865px) {
	.plant-archive__body {
		grid-template-columns: 1fr;
	}
	
	.plant-archive__main {
	    width: 100vw;
	}
	
	.plant-archive__header {
	    padding: 2rem;
	}

	.plant-archive__filters--desktop {
		display: none;
	}
	
	.plant-archive__filters-toggle {
		display: inline-block;
		border-radius: 0 !important;
		margin-top: 1.7rem;
		padding: 7px 28px;
	}
	
	.plant-archive__controls {
	    display: flex;
	    flex-direction: column;
	}


	.plant-archive__search {
	    width: 100%;
	}
	
	.plant-archive__toggle-filter-sort {
	    display: flex;
	    flex-flow: row nowrap;
	    justify-content: space-between;
	    width: 100%;
	}
	
	.plant-archive__sort {
	    width: 70%;
	}
	
	

	.plant-archive__grid {
		/*grid-template-columns: 1fr;*/
	}
}

@media (max-width: 865px) {
    .plant-archive__sort {
	    width: 50%;
	}
	
	.plant-archive__results-meta {
	    flex-direction: column;
	    justify-content: right;
	}
	
	.plant-archive__results-meta > p {
	    text-align: right;
	}
    .plant-archive__grid {
		grid-template-columns: 1fr;
	} 
    
}