/* Ad Landing Page — paid-ad landing page content type
   Author: Edwin M
   Date: 2026-10-19

   Mobile-first: unprefixed rules below are the mobile/base layout.
   @media (min-width: ...) blocks add desktop-only overrides.
   Scoped under .page-type-ad_landing_page since global-styling
   loads unconditionally site-wide (same precedent as programs.css).
*/

/* ── Hero band ────────────────────────────────────────────────────────────
   field_group "html element" wrapper (group_ad_hero) renders as
   div.landing-hero-band around preheader/header/body/cta. field_hero_photo_media
   sits directly below it, outside the group.
*/
.page-type-ad_landing_page .landing-hero-band {
  background: #5c8727;
  color: #fff;
  padding: 24px 16px;
}

.page-type-ad_landing_page .landing-hero-band .field--name-field-hero-preheader {
  color: #fbb040;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Open Sans';
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.page-type-ad_landing_page .landing-hero-band .field--name-field-hero-header {
  font-family: 'Adelle';
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 12px;
}

.page-type-ad_landing_page .landing-hero-band .field--name-field-hero-body {
  font-family: 'Open Sans';
  font-size: 1rem;
  margin-bottom: 16px;
}

.page-type-ad_landing_page .landing-hero-band .field--name-field-hero-cta a {
  display: inline-block;
  background-color: #fbb040;
  color: #192a36;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 5px;
}

.page-type-ad_landing_page .landing-hero-band .field--name-field-hero-cta a:hover {
  background-color: #e89f32;
}

.page-type-ad_landing_page .field--name-field-hero-photo-media {
  margin-bottom: 32px;
}

.page-type-ad_landing_page .field--name-field-hero-photo-media img {
  display: block;
  width: 100%;
}

/* Gap below the top lead form block before the first text section (CAREERS). */
.page-type-ad_landing_page .block-upeileadformad {
  margin-bottom: 32px;
}

/* ── Repeated text sections (views.view.ad_landing_page_content:block_1) ──
   Plain Views field output, targeting Drupal's default
   .views-field-field-section-* classes — no custom markup needed.
*/
.page-type-ad_landing_page .adtextsectionlist .views-row {
  margin-bottom: 24px;
}

.page-type-ad_landing_page .adtextsectionlist .views-field-field-section-preheader {
  color: #5c8727;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Open Sans';
  margin-bottom: 4px;
}

.page-type-ad_landing_page .adtextsectionlist .views-field-field-section-header {
  font-family: 'Adelle';
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.page-type-ad_landing_page .adtextsectionlist .views-field-field-section-body {
  font-size: 1rem;
}

.page-type-ad_landing_page .adtextsectionlist .views-field-field-section-body ul {
  margin: 0;
  padding-left: 20px;
}

@media (min-width: 700px) {
  .page-type-ad_landing_page .adtextsectionlist .views-field-field-section-body ul {
    column-count: 2;
    column-gap: 32px;
  }
}

/* Gap above the 2nd/3rd text sections, which each directly follow a
   different block (Testimonials, then the Slider) rather than another
   text section, so they need their own top margin instead of relying on
   .views-row's margin-bottom above. */
.page-type-ad_landing_page .block-views-blockad-landing-page-content-block-4,
.page-type-ad_landing_page .block-views-blockad-landing-page-content-block-5 {
  margin-top: 40px;
}

/* ── Testimonials (views.view.ad_landing_page_content:block_2) ────────────
   Reuses the home page's actual Spotlights markup/classes verbatim
   (spotlightmoreimage/spotlightmoreinfo/dateandcategory/headlinetitle via
   a composed "nothing" field, css_class "frontpagespotlight morespotlight")
   so the layout, fonts, colors, and circle-crop image treatment are
   byte-for-byte the same CSS as the home page Spotlights list — not a
   reimplementation. See adminimal_upei.min.css for the shared rules this
   inherits (float-based photo-left/text-right layout, 92px circle crop,
   Open Sans/Adelle fonts).

   Two small overrides below: the shared .frontpagespotlight.morespotlight
   rule carries a 53px left margin that only makes sense in the home page's
   sidebar layout; this page has no sidebar, so that's neutralized here
   while keeping a top gap after the CAREERS text section above it.
*/
.page-type-ad_landing_page .adtestimoniallist.frontpagespotlight.morespotlight {
  margin: 48px 0 0 0;
}

/* ── Image + text slider (views.view.ad_landing_page_content:block_3) ─────
   views_slideshow_cycle with fixed_height:1 handles row-level sizing.
   Stacked at every width per spec: text panel above, full-width photo
   below, as two separate non-overlapping blocks.
*/
.page-type-ad_landing_page .adlandingslidelist {
  margin-top: 40px;
}

.page-type-ad_landing_page .adlandingslidelist .adlandingslide {
  display: flex;
  flex-direction: column;
}

.page-type-ad_landing_page .adlandingslide-text {
  background: #5c8727;
  color: #fff;
  padding: 24px;
  /* min-height, not height, so longer slide copy never clips. */
  min-height: 220px;
}

.page-type-ad_landing_page .adlandingslide-header {
  font-family: 'Adelle';
  margin-bottom: 8px;
}

.page-type-ad_landing_page .adlandingslide-body {
  font-family: 'Open Sans';
  font-size: 1rem;
}

.page-type-ad_landing_page .adlandingslide-image img {
  display: block;
  width: 100%;
}

/* ── Slideshow prev/next controls ──────────────────────────────────────
   Exact clone of the home page's own working mechanism — confirmed by
   reading its actual CSS (modules/contrib/views_slideshow ships no
   positioning CSS of its own; it's 100% these two theme rules):

     .frontpageprograms .view-content { position: relative; }
     .frontpageprograms .views_slideshow_controls_text {
       position: absolute; bottom: 70px; left: 10px; z-index: 200;
     }

   The mechanism: .view-content wraps both the image area and the controls
   as normal-flow children. Once the controls are taken OUT of flow via
   position:absolute, they no longer contribute to .view-content's height —
   so .view-content's box becomes exactly the image/text area's own height,
   with nothing else padding it out. "bottom:Npx" then reliably lands near
   the image's real edge regardless of any JS-injected sizing on inner
   slideshow elements. (Two earlier attempts positioned against a made-up
   ".skin-default" ancestor and a negative-margin pull — both guessed
   rather than checking what the home page's CSS actually targets.)
*/
.page-type-ad_landing_page .adlandingslidelist .view-content {
  position: relative;
}

.page-type-ad_landing_page .adlandingslidelist .views_slideshow_controls_text {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 200;
}

.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-next-processed,
.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-previous-processed {
  font-size: 0;
  display: inline-block;
  width: 87px;
  height: 87px;
  background-color: #5d8828;
  background-position: center center;
  background-repeat: no-repeat;
}

.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-next-processed a,
.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-previous-processed a {
  color: transparent;
  text-decoration: none;
}

.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-next-processed a:hover,
.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-previous-processed a:hover {
  text-decoration: none;
}

.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-previous-processed {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANNJREFUeNqc0z8KwjAUBvCg0NKhB9B7uErBqUNO0isEHHoUt0CWzEInpx5DtyRQpxYcnpEipfRP3us3hAz5Qcj7smfIJEnChBDnqqquAOBQKI5jJqXMPHhCnxqFtNYXf/gNQ5ot6Be7BS3DAJqHCDSFSDSGBDTAKIooqIdpmjKlVEZAPSzL8uQ3L6DFMr8IoMfuiqK4tW37YFuS5/mh67qadNV/OOdHAh4XgICnlUPi+ZIj8PK3CmC7+tor2AZHtYAtas4zuCGVxDl39+hjjFFfAQYA0cHswRoKIzAAAAAASUVORK5CYII=);
}

.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-next-processed {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQdJREFUeNpi6OjoEP///3/Lq1ev6mVlZbkYiAVATZuB+A8Q/z969OgsUVFRDmI1ooALFy6skpaW5iZZIwhcvXp1o4KCAh/JGkHg9u3b21VUVARJ1ggC9+/f36ulpSVCskYQePLkyRF9fX0JkjWCwMuXL0+amprKkKwRBN6+fXve2tpagWSNIPDx48erjo6OqiRrBIGvX7/ecnV11WAEcRhIBEBnXyBLIwgwkaMJaONqcvy4GehHblJDdQ0wVDlIjcelwHhkJTXlzAOmHGZS0+p0YFplJDV3TADmDpLzYwcwP5JcAjQCSwCSy5wqYJlDOBWcPXu2A6j+PRB/BpZyWcBSjqjUAxBgAEdLuXmdu655AAAAAElFTkSuQmCC);
}

.page-type-ad_landing_page .adlandingslidelist .views-slideshow-controls-text-pause-processed {
  display: none;
}