/* ==========================================================================
   webinars.css — DevOps.com /webinars/ redesign (Sept 2026)
   ==========================================================================
   Loaded site-wide via functions_webinars.php (wp_enqueue_style
   'genesis-webinars-style'). Every selector below targets REAL markup
   produced by:
     - tribe-events/list.php            (hero + CTA bar + page heading)
     - tribe-events/modules/bar.php     (search / date / view-as / submit)
     - tribe-events/list/nav.php        (prev / next pagination)
     - tribe-events/list/single-event.php + single-featured.php (cards)

   This file REPLACES the previous webinars.css, which targeted an old,
   no-longer-used custom template (.one-webinar, .w-image, .w-cont, #slider1,
   .filter-top, .changem, .month-holder, etc.) — none of those classes exist
   on this page anymore, so none of the old rules ever did anything here.
   If any of those old classes are still used on OTHER pages of the site,
   do not delete this file outright — check first. This rewrite only adds
   rules scoped to the selectors listed above; nothing here should affect
   other templates.
   ========================================================================== */

:root {
  --dw-red: #d62d27;
  --dw-red-dark: #a81f1b;
  --dw-navy: #171a2e;
  --dw-ink: #191919;
  --dw-ink-soft: #55585f;
  --dw-line: #e4e2dd;
  --dw-paper: #ffffff;
  --dw-paper-tint: #f7f6f3;
  --dw-radius: 14px;
  --dw-shadow: 0 2px 6px rgba(20, 20, 30, .06), 0 12px 28px rgba(20, 20, 30, .07);
  --dw-shadow-hover: 0 8px 20px rgba(20, 20, 30, .10), 0 24px 48px rgba(20, 20, 30, .12);
}

/* --------------------------------------------------------------------------
   1. HERO — single column, full width, CTA bar
   -------------------------------------------------------------------------- */

.webinars-hero {
  width: 100%;
  background: var(--dw-navy);
  border-radius: var(--dw-radius);
  overflow: hidden;
  margin: 15px 0 0;
}

/* Content Views Pro renders one slide at a time already (col-md-12 /
   pt-cv-1-col), so "single column" is mostly already true — this just
   makes sure it fills the wrapper edge to edge instead of sharing the row
   with the old sidebar column. */
.webinars-hero__carousel,
.webinars-hero__carousel .pt-cv-view,
.webinars-hero__carousel .pt-cv-wrapper,
.webinars-hero__carousel .pt-cv-carousel {
  width: 100% !important;
  max-width: 100% !important;
}

.webinars-hero__carousel .pt-cv-carousel .carousel-inner .item img,
.webinars-hero__carousel .pt-cv-thumbnail {
  width: 100%;
  height: auto;
  display: block;
}

.webinars-hero__carousel .carousel-indicators {
  bottom: 14px;
}

.webinars-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  background: var(--dw-ink);
  color: #fff;
  text-align: center;
  padding: 16px 20px;
  font-size: 15px;
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
}

.webinars-hero__cta span {
  color: #c9c9c9;
}

.webinars-hero__cta strong {
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid var(--dw-red);
  padding-bottom: 2px;
}

.webinars-hero__cta:hover strong {
  color: #ffd3d1;
}

/* Page heading */
h1.featured_title {
  text-align: center;
  margin: 32px 0 8px;
  font-size: clamp(26px, 3.4vw, 38px);
}

/* NOTE: the old "Past Webinars" widget (.webinars-replays-link) has been
   removed from tribe-events/list.php entirely — the widget area itself
   ('webinars-top-right') is untouched in Appearance > Widgets, it's just
   no longer displayed on this page, so there's nothing left here to style. */

/* tribe_events_before_template heading (the h3 injected by
   custom_events_before_html() in functions.php) */
.webinars-heading {
  text-align: center;
  margin: 28px 0 6px;
}

.webinars-details {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 12px;
  color: var(--dw-ink-soft);
}

/* --------------------------------------------------------------------------
   2. FILTER / SEARCH / NAV BAR (tribe-events/modules/bar.php — unchanged
      template, restyled entirely via CSS)
   -------------------------------------------------------------------------- */

#tribe-events-bar {
  margin: 28px 0 8px;
}

#tribe-bar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--dw-paper);
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  padding: 16px 20px;
  font-family: 'Raleway', sans-serif;
}

/* Mobile accordion toggle — shown only under the breakpoint below */
#tribe-bar-collapse-toggle {
  display: none;
  width: 100%;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dw-ink);
  cursor: pointer;
}

#tribe-bar-views {
  order: 3;
  background: var(--dw-paper-tint);
  border: 1px solid var(--dw-line);
  border-radius: 10px;
  padding: 8px 14px;
}

#tribe-bar-views label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dw-ink-soft);
  display: block;
  margin-bottom: 2px;
}

.tribe-bar-views-select {
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--dw-navy);
}

.tribe-bar-filters {
  flex: 1;
  order: 1;
}

.tribe-bar-filters-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Keyword search field — add a search icon via CSS background, no markup
   changes needed. */
.tribe-bar-search-filter {
  flex: 1 1 240px;
  background: var(--dw-paper-tint);
  border: 1px solid var(--dw-line);
  border-radius: 10px;
  padding: 8px 14px 8px 36px;
  position: relative;
}

.tribe-bar-search-filter::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border: 2px solid var(--dw-ink-soft);
  border-radius: 50%;
  box-sizing: border-box;
}

.tribe-bar-search-filter::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 62%;
  width: 6px;
  height: 2px;
  background: var(--dw-ink-soft);
  transform: rotate(45deg);
}

.tribe-bar-date-filter {
  background: var(--dw-paper-tint);
  border: 1px solid var(--dw-line);
  border-radius: 10px;
  padding: 8px 14px;
  flex: 0 0 160px;
}

.tribe-bar-search-filter label,
.tribe-bar-date-filter label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dw-ink-soft);
  margin-bottom: 2px;
}

.tribe-bar-search-filter input,
.tribe-bar-date-filter input {
  border: none;
  background: none;
  width: 100%;
  font-size: 14px;
  color: var(--dw-ink);
}

.tribe-bar-submit {
  order: 4;
  margin-left: auto;
}

.tribe-bar-submit .tribe-events-button {
  background: var(--dw-red);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s;
}

.tribe-bar-submit .tribe-events-button:hover {
  background: var(--dw-red-dark);
}

/* --------------------------------------------------------------------------
   3. PREV / NEXT NAV (tribe-events/list/nav.php — unchanged template)
   -------------------------------------------------------------------------- */

#tribe-events-header .tribe-events-sub-nav,
#tribe-events-footer .tribe-events-sub-nav {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

.tribe-events-sub-nav li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dw-navy);
  text-decoration: none;
}

.tribe-events-sub-nav li a:hover {
  border-color: var(--dw-red);
  color: var(--dw-red);
}

#tribe-events-footer {
  margin-top: 30px;
}

.tribe-events-ical {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dw-navy);
  text-decoration: none;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   4. CARD GRID (tribe-events/list/single-event.php + single-featured.php)
   -------------------------------------------------------------------------- */

.tribe-events-loop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  clear: both;
  text-align: left;
  max-width: none;
}

.tribe-events-list-separator-month {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dw-navy);
  font-family: 'Raleway', sans-serif;
}

.tribe-events-list-separator-month::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dw-line);
}

.tribe-events-list .type-tribe_events {
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  background: var(--dw-paper);
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}

.tribe-events-list .type-tribe_events:hover {
  transform: translateY(-4px);
  box-shadow: var(--dw-shadow-hover);
}

/* Card media (image + date badge) */
.webinars-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dw-navy);
}

.webinars-card-media img,
.tribe-events-list .tribe-events-event-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

.webinars-card-date-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  color: var(--dw-navy);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  letter-spacing: .03em;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  font-family: 'Raleway', sans-serif;
}

.webinars-card-featured-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--dw-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: 999px;
}

/* Title */
.tribe-events-list .type-tribe_events h2.tribe-events-list-event-title {
  font-size: 17px;
  line-height: 1.32;
  height: auto;
  margin: 16px 18px 0;
}

.tribe-events-list-event-title a:hover {
  color: var(--dw-red);
}

/* Meta (date/time line) */
.tribe-events-loop .tribe-events-event-meta {
  border: none;
  padding: 6px 18px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--dw-red);
  font-family: 'Raleway', sans-serif;
}

.tribe-events-list .tribe-events-venue-details {
  display: none;
}

/* Description + footer */
.tribe-events-loop .tribe-events-content,
.tribe-events-list .tribe-events-event-image + div.tribe-events-content {
  float: none;
  width: 100%;
  padding: 8px 18px 18px;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#tribe-events .tribe-events-content p,
.tribe-events-after-html p,
.tribe-events-before-html p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dw-ink-soft);
  text-align: left;
  padding: 0;
  margin: 0 0 12px;
  flex: 1;
}

.webinars-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--dw-line);
  margin-top: auto;
}

.tribe-events-read-more {
  position: static;
  display: inline-flex;
  background: var(--dw-red);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s;
}

.tribe-events-read-more:hover {
  background: var(--dw-red-dark);
}

.event-sponser {
  position: static;
  font-size: 11.5px;
  color: #9a9a9a;
  text-align: right;
  left: auto;
  bottom: auto;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .tribe-events-loop {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tribe-events-loop {
    grid-template-columns: 1fr;
  }

  #tribe-bar-collapse-toggle {
    display: block;
  }

  /* The Events Calendar's own tribe-events-bar.min.js already toggles
     visibility of the filter fields on mobile (aria-expanded true/false) —
     intentionally not re-implementing that here to avoid fighting the
     plugin's existing, working behavior. This block is cosmetic only. */

  .tribe-bar-submit {
    margin-left: 0;
    width: 100%;
  }

  #tribe-events-header .tribe-events-sub-nav,
  #tribe-events-footer .tribe-events-sub-nav {
    flex-direction: column;
    gap: 10px;
  }
}