/* ========================================================================
   prospect-stories.css
   Styles for the PROSPECT Stories view (/prospect-stories, node 207)
   All rules are scoped under .view-prospect-stories to avoid affecting
   any other page or view on the site.
   ======================================================================== */


/* ========================================================================
   1. EXPOSED FILTERS
   ======================================================================== */

/* Override Bootstrap's form-inline with CSS Grid */
.view-prospect-stories .views-exposed-form .form--inline.form-inline {
  display: grid !important;
  grid-template-columns: auto auto auto;
  gap: 16px 20px;
  align-items: center;
}

/* Override Bootstrap .form-inline .form-group inline-block per item */
.view-prospect-stories .views-exposed-form .form--inline .form-item {
  display: flex !important;
  flex-direction: column;
  margin-bottom: 0;
  vertical-align: unset;
}

/* Label stacked above the dropdown */
.view-prospect-stories .views-exposed-form .form-item .control-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 13px;
  color: #535353;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* Select wrapper and select: natural content width */
.view-prospect-stories .views-exposed-form .select-wrapper {
  display: block;
}

.view-prospect-stories .views-exposed-form .select-wrapper select {
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  color: #535353;
  text-align: center;
  text-align-last: center;
}

.view-prospect-stories .views-exposed-form .select-wrapper select option {
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  color: #535353;
}

/* Desktop grid placement */
/* Row 1 */
.view-prospect-stories .form-item-field-category-target-id         { grid-row: 1; grid-column: 1; }
.view-prospect-stories .form-item-field-enablers-target-id          { grid-row: 1; grid-column: 2; }
.view-prospect-stories .form-item-field-financing-schemes-target-id { grid-row: 1; grid-column: 3; }
/* Row 2 */
.view-prospect-stories .form-item-field-area-of-action-target-id   { grid-row: 2; grid-column: 1; }
.view-prospect-stories .form-item-field-mentor-target-id            { grid-row: 2; grid-column: 2 / 4; }
/* Row 3 */
.view-prospect-stories .form-item-field-country-target-id           { grid-row: 3; grid-column: 1; }
.view-prospect-stories .form-item-field-year-target-id              { grid-row: 3; grid-column: 2; }
.view-prospect-stories .views-exposed-form .form-actions {
  grid-row: 3;
  grid-column: 3;
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

.view-prospect-stories .views-exposed-form .form-actions .btn {
  margin-right: 0;
}

/* Tablet (≤992px): 2 columns */
@media (max-width: 992px) {
  .view-prospect-stories .views-exposed-form .form--inline.form-inline {
    grid-template-columns: 1fr 1fr;
  }
  .view-prospect-stories .form-item-field-category-target-id         { grid-row: 1; grid-column: 1; }
  .view-prospect-stories .form-item-field-enablers-target-id          { grid-row: 1; grid-column: 2; }
  .view-prospect-stories .form-item-field-financing-schemes-target-id { grid-row: 2; grid-column: 1; }
  .view-prospect-stories .form-item-field-area-of-action-target-id   { grid-row: 2; grid-column: 2; }
  .view-prospect-stories .form-item-field-mentor-target-id            { grid-row: 3; grid-column: 1 / 3; }
  .view-prospect-stories .form-item-field-country-target-id           { grid-row: 4; grid-column: 1; }
  .view-prospect-stories .form-item-field-year-target-id              { grid-row: 4; grid-column: 2; }
  .view-prospect-stories .views-exposed-form .form-actions            { grid-row: 5; grid-column: 1 / 3; }
  .view-prospect-stories .views-exposed-form .select-wrapper select   { width: 100%; }
}

/* Mobile (≤575px): 1 column */
@media (max-width: 575px) {
  .view-prospect-stories .views-exposed-form .form--inline.form-inline {
    grid-template-columns: 1fr;
  }
  .view-prospect-stories .form-item-field-category-target-id,
  .view-prospect-stories .form-item-field-enablers-target-id,
  .view-prospect-stories .form-item-field-financing-schemes-target-id,
  .view-prospect-stories .form-item-field-area-of-action-target-id,
  .view-prospect-stories .form-item-field-mentor-target-id,
  .view-prospect-stories .form-item-field-country-target-id,
  .view-prospect-stories .form-item-field-year-target-id,
  .view-prospect-stories .views-exposed-form .form-actions {
    grid-column: 1;
    grid-row: auto;
  }
  .view-prospect-stories .views-exposed-form .select-wrapper select { width: 100%; }
  .view-prospect-stories .views-exposed-form .form--inline .form-item { align-items: center; }
}


/* ========================================================================
   2. STORY CARD GRID
   ======================================================================== */

.view-prospect-stories {
  padding-top: 50px;
  padding-bottom: 40px;
}

.view-prospect-stories .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Desktop: 3 columns */
.view-prospect-stories .view-content .views-row {
  flex: 0 0 calc((100% - 48px) / 3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  border: 1px solid #f1f2f3;
  transition: box-shadow 0.5s;
  padding: 30px;
}

.view-prospect-stories .view-content .views-row:hover {
  box-shadow: 0 1px 35px rgba(0, 0, 0, 0.07);
}

/* Tablet: 2 columns */
@media (max-width: 991px) {
  .view-prospect-stories .view-content .views-row {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  .view-prospect-stories .view-content .views-row {
    flex: 0 0 100%;
  }
}


/* ========================================================================
   3. TITLE FIELD
   Centered, accent green, Dosis font, no link.
   ======================================================================== */

.view-prospect-stories .view-content .views-row .views-field-title {
  display: block !important;
  text-align: center;
  margin-bottom: 40px !important;
}

.view-prospect-stories .view-content .views-row .views-field-title .field-content {
  font-family: "Dosis", "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #97B42A;
  letter-spacing: 0.5px;
  line-height: 1.6;
}


/* ========================================================================
   4. FIELD LAYOUT
   Each field: [Label]: [content] on a single row, left-aligned.
   The .views-label already includes ": " from Drupal's output.
   Multiple values are already comma-separated by the view formatter.
   ======================================================================== */

.view-prospect-stories .view-content .views-row .views-field {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 2px;
}

.view-prospect-stories .view-content .views-row .views-label {
  font-weight: 600;
  color: #535353;
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 5px;
}

/* Field content — excludes title and document fields which are handled separately */
.view-prospect-stories .view-content .views-row .views-field:not(.views-field-title):not(.views-field-field-document) .field-content {
  font-weight: 300;
  color: #535353;
  flex: 1;
  min-width: 0;
}


/* ========================================================================
   5. DOWNLOAD BUTTON (Document / File field)
   Centered below all other fields. Label hidden. Filename hidden.
   "DOWNLOAD" text injected via ::before pseudo-element.
   ======================================================================== */

/* Override the flex-row layout applied to all fields above */
.view-prospect-stories .view-content .views-row .views-field-field-document {
  display: block !important;
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

/* Suppress the icon-before pseudo-element injected by the theme on the file wrapper */
.view-prospect-stories .view-content .views-row .views-field-field-document .file.icon-before::before {
  content: none !important;
  display: none !important;
}

/* Reset any border/padding/background the .file span may carry */
.view-prospect-stories .view-content .views-row .views-field-field-document .file {
  display: block;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Make .file-link a block so text-align: center on the parent works */
/* Reset the theme's white background and top/bottom borders on this span */
.view-prospect-stories .view-content .views-row .views-field-field-document .file-link {
  display: block;
  background: transparent !important;
  border: none !important;
}

/* Hide the file type icon and the file size text */
.view-prospect-stories .view-content .views-row .views-field-field-document .file-icon,
.view-prospect-stories .view-content .views-row .views-field-field-document .file-size {
  display: none;
}

/* Style the file link as a button; collapse filename text to zero size */
.view-prospect-stories .view-content .views-row .views-field-field-document .file-link a {
  display: inline-block;
  font-size: 0;
  color: transparent;
  background-color: #97B42A;
  border-radius: 10rem;
  padding: 9px 34px;
  border: 0.8px solid #ebebeb;
  outline: none;
  transition: all 0.15s linear;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
}

/* Inject "DOWNLOAD" label */
.view-prospect-stories .view-content .views-row .views-field-field-document .file-link a::before {
  content: "DOWNLOAD";
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  line-height: 22.8px;
}

/* Hover state for download button */
.view-prospect-stories .view-content .views-row .views-field-field-document .file-link a:hover {
  background-color: #7a9120;
  box-shadow: 0 2px 10px rgba(151, 180, 42, 0.4);
}