/* =========================================================================
   Resource Library — default styles
   Part of the plugin. Do not edit this file for a single site.

   These defaults are deliberately neutral: fonts and text colours INHERIT from
   the active theme, and the accent follows the theme's own colour variable
   where one exists. Dropped onto any WordPress site it should look at home
   rather than importing another brand's design.

   To match a specific design, override the tokens below from the site's own
   custom CSS (WPCode, Divi -> Theme Options -> Custom CSS, or a child theme).
   Editing this file means losing your changes on the next plugin update.
   ========================================================================= */


/* -------------------------------------------------------------- tokens --
   Override these, not the rules underneath.

   The accent resolves in order: Divi's global primary colour, then a block
   theme's primary preset, then a neutral blue. On a Divi site it picks up
   Global Colors automatically; elsewhere it uses whatever the theme provides.
   ----------------------------------------------------------------------- */
.presto-res,
.presto-featured,
.presto-res-grid {
  --presto-accent: var(--gcid-primary-color,
                   var(--wp--preset--color--primary, #0d6efd));

  /* Typography and text colour follow the theme unless overridden. */
  --presto-font:     inherit;
  --presto-display:  inherit;
  --presto-heading:  inherit;
  --presto-text:     inherit;

  --presto-surface:  #fff;      /* card background */
  --presto-subtle:   #f1f3f7;   /* pill background, image placeholder */
  --presto-line:     #e2e6ee;   /* hairlines, card borders */

  --presto-radius:     4px;
  --presto-gap:        20px;
  --presto-card-ratio: 4/3;

  /* The featured block often sits on a dark band. Set this to #fff there. */
  --presto-featured-text: inherit;
  --presto-featured-pill-bg: rgba(127, 127, 127, .15);
}


/* ---------------------------------------------------------------- grid -- */
.presto-res-grid { display: grid; gap: var(--presto-gap); }
.presto-res-grid--3 { grid-template-columns: repeat(3, 1fr); }
.presto-res-grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1100px) {
  .presto-res-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .presto-res-grid--3,
  .presto-res-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .presto-res-grid--3,
  .presto-res-grid--6 { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------- cards -- */
.presto-res-card {
  display: flex;
  flex-direction: column;
  background: var(--presto-surface);
  border: 1px solid var(--presto-line);
  border-radius: var(--presto-radius);
  overflow: hidden;
}

.presto-res-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--presto-card-ratio);
  background: var(--presto-subtle);
}
.presto-res-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.presto-res-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.presto-res-tag {
  margin: 0;
  font-family: var(--presto-font);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--presto-accent);
}

.presto-res-card__title {
  margin: 0;
  font-family: var(--presto-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  color: var(--presto-heading);
}
.presto-res-card__title a { color: inherit; text-decoration: none; }
.presto-res-card__title a:hover { color: var(--presto-accent); }

.presto-res-card__excerpt {
  margin: 0;
  font-family: var(--presto-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--presto-text);
}

/* Pushed to the bottom so CTAs line up across cards of unequal height. */
.presto-res-more {
  margin-top: auto;
  font-family: var(--presto-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--presto-accent);
  text-decoration: none;
}
.presto-res-more:hover { text-decoration: underline; }

.presto-res-noimg {
  display: block;
  width: 100%; height: 100%;
  background: var(--presto-subtle);
}

/* Draft badge — only ever rendered for logged-in editors. */
.presto-res-draft {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  background: #b25e00;
  color: #fff;
  font-family: var(--presto-font);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .06em;
  vertical-align: middle;
}


/* -------------------------------------------------------- play overlay -- */
.presto-res-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
}
.presto-res-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}


/* ---------------------------------------------- filters, search, more -- */
.presto-res__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.presto-res__pills { display: flex; flex-wrap: wrap; gap: 8px; }

.presto-res__pill {
  border: 0;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: var(--presto-radius);
  background: var(--presto-subtle);
  color: var(--presto-heading);
  font-family: var(--presto-font);
  font-size: 14px;
  line-height: 1.5;
  transition: background .15s, color .15s;
}
.presto-res__pill:hover { filter: brightness(.96); }
.presto-res__pill.is-active { background: var(--presto-accent); color: #fff; }
.presto-res__pill:focus-visible {
  outline: 2px solid var(--presto-accent);
  outline-offset: 2px;
}

.presto-res__search input {
  width: 243px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--presto-line);
  border-radius: var(--presto-radius);
  background: var(--presto-subtle);
  font-family: var(--presto-font);
  font-size: 14px;
  line-height: 1.5;
}

/* Empty-state and error messages. Hidden entirely when there is nothing to
   say, so it never leaves a gap above the grid. */
.presto-res__status {
  margin: 0 0 12px;
  font-family: var(--presto-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--presto-text);
}
.presto-res__status:empty { display: none; }

/* Dim the grid while a request is in flight. */
.presto-res.is-busy .presto-res__results {
  opacity: .45;
  transition: opacity .15s;
}

.presto-res__footer {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.presto-res__more {
  cursor: pointer;
  background: var(--presto-surface);
  color: var(--presto-accent);
  border: 1px solid var(--presto-accent);
  border-radius: var(--presto-radius);
  padding: 12px 26px;
  font-family: var(--presto-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.presto-res__more:hover { background: var(--presto-accent); color: #fff; }
.presto-res__more[hidden] { display: none; }


/* ---------------------------------------------------- featured resource -- */
.presto-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 980px) {
  .presto-featured { grid-template-columns: 1fr; gap: 26px; }
}

.presto-featured__media img {
  width: 100%; height: auto;
  display: block;
  border-radius: var(--presto-radius);
}

.presto-featured__eyebrow {
  margin: 0 0 8px;
  font-family: var(--presto-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--presto-accent);
}

.presto-featured__title {
  margin: 0 0 16px;
  font-family: var(--presto-display);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.2;
  color: var(--presto-featured-text);
}
.presto-featured__title a { color: inherit; text-decoration: none; }
@media (max-width: 980px) { .presto-featured__title { font-size: 36px; } }
@media (max-width: 600px) { .presto-featured__title { font-size: 27px; } }

.presto-featured__excerpt {
  margin: 0 0 18px;
  font-family: var(--presto-font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--presto-featured-text);
}

.presto-featured__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
}

.presto-pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--presto-radius);
  background: var(--presto-featured-pill-bg);
  color: var(--presto-featured-text);
  font-family: var(--presto-font);
  font-size: 14px;
  line-height: 1.5;
}

.presto-btn {
  display: inline-block;
  background: var(--presto-accent);
  color: #fff;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--presto-radius);
  font-family: var(--presto-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}
.presto-btn:hover { filter: brightness(1.1); color: #fff; }


/* ------------------------------------------------------------- hooks --
   No styling by default. They exist so a site can target these states from
   its own CSS without the plugin markup needing to change.

     .presto-res-card.is-video   card whose post is Type = Video
     .presto-featured__body      copy column of the featured block
   ----------------------------------------------------------------------- */


/* --------------------------------------------------------------- misc -- */
.presto-res-empty {
  margin: 0;
  font-family: var(--presto-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--presto-text);
}