/* MYDC Projects Archive — scoped styles.
 * Enqueued only on the project post-type archive (see Plugin::enqueue_frontend).
 *
 * LAYOUT OWNERSHIP
 * Elementor Theme Builder archive template 1063 owns structural layout: container
 * width (--width), min-height, background image/position/overlay, and the loop
 * grid's columns and gaps. This file must not fight it.
 *
 * Where this file contributes container spacing that the template leaves unset, it
 * writes Elementor's OWN custom properties (--padding-top / --padding-right /
 * --padding-bottom / --padding-left), which Elementor's .e-con engine consumes.
 *
 * Those selectors are compounded with .e-con on purpose. Elementor itself declares
 * `.e-con{--padding-top:var(--container-default-padding-top,10px)}` at specificity
 * (0,1,0) in a stylesheet that loads AFTER this one, so a bare .mydc-* class ties
 * and loses. Compounding to (0,2,0) wins that tie while still sitting below
 * Elementor's per-element rules (.elementor-1063 .elementor-element-xxx, 0,3,0) —
 * so anything set in the Elementor UI still wins automatically, with no !important
 * arms race.
 *
 * DO NOT reintroduce !important width / max-width / margin-inline here, and never
 * mark a `padding` shorthand !important: an !important shorthand also defeats this
 * file's own responsive media queries, which is what previously left the hero rail
 * with 180px of side padding at 375px and collapsed its content to zero width.
 *
 * Hook classes (.mydc-project-archive__filter-widget, .mydc-project-archive__grid,
 * .mydc-project-archive__empty) are also queried by assets/js/archive.js — do not
 * rename them.
 */

/* ---------- Tokens ----------
 * The CTA section is a SIBLING of .mydc-project-archive (both are top-level
 * containers of template 1063), so tokens must be declared on both roots or every
 * var() reference inside the CTA resolves to nothing.
 */
.mydc-project-archive,
.mydc-project-archive__cta{
  --mydc-ink:#111111;
  --mydc-olive:#66A403;
  --mydc-ground:#F7F5F0;
  --mydc-white:#FFFFFF;
  --mydc-divider:#d8d6cf;
  --mydc-gutter:100px;
}
@media (max-width:1560px){
  .mydc-project-archive,.mydc-project-archive__cta{--mydc-gutter:80px}
}
@media (max-width:1024px){
  .mydc-project-archive,.mydc-project-archive__cta{--mydc-gutter:48px}
}
@media (max-width:768px){
  .mydc-project-archive,.mydc-project-archive__cta{--mydc-gutter:32px}
}
@media (max-width:480px){
  .mydc-project-archive,.mydc-project-archive__cta{--mydc-gutter:20px}
}

.mydc-project-archive{
  background:var(--mydc-ground);
  color:var(--mydc-ink);
  font-family:Arial,sans-serif;
}
.mydc-project-archive,.mydc-project-archive *{box-sizing:border-box}

/* ---------- Container spacing ----------
 * Delivered through Elementor's own padding properties. Template 1063 sets no
 * padding on these three containers, so these values apply; the moment someone
 * sets padding on them in the Elementor UI, Elementor's rule wins instead.
 * Width, min-height and background stay entirely with the template.
 */
.mydc-project-archive__hero-rail.e-con{
  --padding-top:132px;
  --padding-bottom:64px;
  --padding-left:var(--mydc-gutter);
  --padding-right:var(--mydc-gutter);
  position:relative;
  z-index:1;
}
@media (max-width:1024px){
  .mydc-project-archive__hero-rail.e-con{--padding-top:72px}
}
@media (max-width:768px){
  .mydc-project-archive__hero-rail.e-con{--padding-top:56px;--padding-bottom:40px}
}
@media (max-width:480px){
  .mydc-project-archive__hero-rail.e-con{--padding-top:48px}
}

.mydc-project-archive__filters-rail.e-con{
  --padding-top:10px;
  --padding-bottom:24px;
  --padding-left:var(--mydc-gutter);
  --padding-right:var(--mydc-gutter);
}

.mydc-project-archive__grid-section.e-con{
  --padding-top:24px;
  --padding-bottom:50px;
  --padding-left:var(--mydc-gutter);
  --padding-right:var(--mydc-gutter);
}
@media (max-width:1024px){
  .mydc-project-archive__grid-section.e-con{--padding-bottom:56px}
}

/* ---------- Hero ---------- */
.mydc-project-archive__hero-eyebrow{
  margin:0;
  color:var(--mydc-olive);
  font:700 14px/1 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.mydc-project-archive__hero-title{
  margin:20px 0 0;
  color:#fff;
  font:700 80px/1.05 Arial,sans-serif;
  letter-spacing:-1px;
}
.mydc-project-archive__hero-intro{
  margin-top:20px;
}
.mydc-project-archive__hero-intro p{
  margin:0;
  color:rgba(255,255,255,.9);
  font:400 20px/1.6 Arial,sans-serif;
}
@media (max-width:1024px){
  .mydc-project-archive__hero-title{font-size:52px}
}
@media (max-width:768px){
  .mydc-project-archive__hero-title{font-size:36px}
  .mydc-project-archive__hero-intro p{font-size:17px}
}

/* ---------- Filters ----------
 * Row direction, wrapping and overflow are template 1063's call
 * (--e-filter-direction / --e-filter-wrap / --e-filter-overflow-x) and the gap is
 * the widget's own "Space Between" control. This file only skins the items, so the
 * filter row wraps instead of clipping on narrow viewports.
 */
.mydc-project-archive__filters{
  border-bottom:1px solid var(--mydc-divider);
  background:var(--mydc-ground);
}
/* Compounded with .elementor-widget-taxonomy-filter for the same reason as .e-con
 * above: Elementor's widget default (--e-filter-justify-content:center) is (0,1,0)
 * in a later sheet. At (0,2,0) these win, while the widget's own Alignment and
 * Space Between controls (0,3,0) still override them. */
.mydc-project-archive__filter-widget.elementor-widget-taxonomy-filter{
  --e-filter-justify-content:flex-start;
  --e-filter-space-between:44px;
  --e-filter-normal-text-color:#666;
  --e-filter-hover-text-color:#111;
  --e-filter-active-text-color:#111;
  --e-filter-item-padding:0 0 14px 0;
  --e-filter-item-border-radius:0;
}
@media (max-width:768px){
  .mydc-project-archive__filter-widget.elementor-widget-taxonomy-filter{--e-filter-space-between:24px}
}
.mydc-project-archive__filter-widget .e-filter-item{
  position:relative;
  background:none;
  border:none;
  font:400 20px/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#666;
  cursor:pointer;
  padding:0 0 14px;
  white-space:nowrap;
}
.mydc-project-archive__filter-widget .e-filter-item::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  background:var(--mydc-olive);
  transform:translateX(-50%);
  transition:width .15s ease;
}
.mydc-project-archive__filter-widget .e-filter-item[aria-pressed="true"]{
  color:var(--mydc-ink);
  font-weight:700;
}
.mydc-project-archive__filter-widget .e-filter-item[aria-pressed="true"]::after{
  width:32px;
}
.mydc-project-archive__filter-widget .e-filter-item:hover{color:var(--mydc-ink)}
.mydc-project-archive__filter-widget .e-filter-item:focus-visible{
  outline:3px solid var(--mydc-olive);
  outline-offset:3px;
}

/* ---------- Card ----------
 * Loop template 1062 owns the card's flex layout, which Elementor applies to
 * > .e-con-inner via --display / --row-gap. Setting display/flex-direction/gap on
 * the outer .e-con here would be silently inert, so only position:relative remains —
 * it anchors the full-card overlay link below.
 */
.mydc-project-card{position:relative}

.mydc-project-card__image{
  display:block;
  border-radius:8px;
  overflow:hidden;
}
/* Landscape crop. This is the one sizing rule this file must keep: featured images
 * are uploaded at mixed native ratios (portrait originals included) and Elementor's
 * image widget has no aspect-ratio control, so without this every card image renders
 * at its own ratio and the grid rows go ragged. */
.mydc-project-card__image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:554.67/360;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  transition:transform .35s ease;
}
.mydc-project-card:hover .mydc-project-card__image img{transform:scale(1.03)}
.mydc-project-card__type{
  display:block;
  color:var(--mydc-olive);
  font:700 11px/1 Arial,sans-serif;
  letter-spacing:1.3px;
  text-transform:uppercase;
}
.mydc-project-card__type .mydc-project-type{
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
}
.mydc-project-card__title{margin:0}
.mydc-project-card__title a{
  color:var(--mydc-ink);
  font:700 24px/1.25 Arial,sans-serif;
  text-decoration:none;
}
.mydc-project-card__title a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.mydc-project-card__title a:focus-visible{
  outline:3px solid var(--mydc-olive);
  outline-offset:3px;
}
.mydc-project-card__meta{
  display:block;
  color:#666;
  font:400 13px/1.5 Arial,sans-serif;
}
/* The card CTA is a real Elementor button widget skinned down to a text link.
 * Loop template 1062 paints it olive at (0,3,0), so these need !important to land.
 * Preferred long-term fix: style this button in template 1062's Style tab and delete
 * this block — it is the last !important cluster in this file. */
.mydc-project-card__link .elementor-button{
  position:relative;
  z-index:2;
  background:none !important;
  border:none !important;
  padding:0 !important;
  color:var(--mydc-ink) !important;
  font:700 12px/1 Arial,sans-serif !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
  border-radius:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  width:fit-content !important;
}
.mydc-project-card__link .elementor-button:hover{color:var(--mydc-olive) !important}
.mydc-project-card__link .elementor-button:focus-visible{
  outline:3px solid var(--mydc-olive);
  outline-offset:3px;
}

/* ---------- CTA ----------
 * Template 1063 owns this section's background image, its dark overlay
 * (--overlay-opacity), min-height, container widths and its 10% padding. Only type
 * and the button's shape are set here.
 */
.mydc-project-archive__cta-eyebrow{
  margin:0 0 16px;
  color:var(--mydc-olive);
  font:700 12px/1 Arial,sans-serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.mydc-project-archive__cta-heading{
  margin:0 0 18px;
  color:#fff;
  max-width:620px;
  font:700 clamp(32px,4vw,48px)/1.15 Arial,sans-serif;
  letter-spacing:-1px;
}
.mydc-project-archive__cta-copy{max-width:560px;margin-bottom:28px}
.mydc-project-archive__cta-copy p{
  margin:0;
  color:rgba(255,255,255,.85);
  font:400 16px/1.6 Arial,sans-serif;
}
/* No background here: the button's colour is an Elementor control on the widget
 * (the previous `background: --mydc-olive` was invalid CSS and was being dropped). */
.mydc-project-archive__cta-button .elementor-button{
  padding:18px 40px;
  border-radius:4px;
  font:700 14px/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.mydc-project-archive__cta-button .elementor-button:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}
@media (max-width:767px){
  .mydc-project-card__title a{font-size:20px}
}

/* ---------- Empty state (client-side filter, no results) ----------
 * Injected by archive.js as a sibling of the loop grid, inside
 * .mydc-project-archive__grid-rail, so it already sits inside the page gutter and
 * needs no horizontal padding of its own.
 */
.mydc-project-archive__empty{
  padding-top:48px;
  text-align:left;
  color:#666;
  font:400 16px/1.5 Arial,sans-serif;
}