/**
 * Download Zone (/download-zone) — page-scoped styles.
 * Library: i2_theme/downzone
 * Figma: https://www.figma.com/design/WeP5iborHutDxFzTmyEjaX/web?node-id=18159-6843
 */

:root {
  --dz-bg: #DBF9D9;
  --dz-green: #66bb6a;
  --dz-green-dark: #569a20;
  --dz-purple: #b66cdd;
  --dz-purple-soft: #c9a0e8;
  --dz-text: #000;
  --dz-muted: #333;
  --dz-card-radius: 20px;
  --dz-pill-radius: 999px;
  --dz-border: #c8e6c9;
  --dz-font: "Nunito", "Noto Sans TC", sans-serif;
}

/* -------------------------------------------------------------------------
 * Page chrome — match no-banner pages (eshop / webform: 250px / 160px)
 * ------------------------------------------------------------------------- */

body.bp-downzone {
  background-color: var(--dz-bg);
}

body.bp-downzone #block-i2-theme-content {
  padding-top: 250px;
}

body.bp-downzone .theme-content-section,
body.bp-downzone .banner-section {
  background-color: var(--dz-bg);
}

body.bp-downzone .banner-section .banner-decorate {
  display: none;
}

.view-block-down-zone {
  --dz-pad: var(--i2-container-padding, 20px);
  width: 100%;
  max-width: var(--i2-theme-container, 1464px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dz-pad);
  padding-right: var(--dz-pad);
  box-sizing: border-box;
  font-family: var(--dz-font);
}

.view-block-down-zone .downzone-file-source {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.view-block-down-zone .downzone-file-source img {
  display: none !important;
}


.view-block-down-zone .view-header {
    margin-bottom: 58px;
 }

/* -------------------------------------------------------------------------
 * Exposed filters
 * Row: [Category] [Search........🔍] -------- [Sort by date] [Ascending ▾]
 * ------------------------------------------------------------------------- */
.view-block-down-zone .view-filters {
  margin-bottom: 41px;
}

.view-block-down-zone .views-exposed-form .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 30px;
  clear: none;
  float: none;
}

.view-block-down-zone .views-exposed-form .form--inline::after,
.view-block-down-zone .views-exposed-form .form--inline::before {
  display: none !important;
  content: none !important;
}

.view-block-down-zone .views-exposed-form .form-item {
  float: none !important;
  margin: 0;
  padding: 0;
}

.view-block-down-zone .views-exposed-form .form-item-field-downzone-type-target-id > label,
.view-block-down-zone .views-exposed-form .form-item-title > label,
.view-block-down-zone .views-exposed-form .form-item-sort-by {
  display: none !important;
}

.view-block-down-zone .views-exposed-form .form-item-sort-order {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.view-block-down-zone .views-exposed-form .form-item-sort-order > label {
  margin: 0;
  font-family: var(--dz-font);
  font-size: 18px;
  font-weight: 600;
  color: #569a20;
  white-space: nowrap;
}

.view-block-down-zone .views-exposed-form select.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 20px;
  border: 1px solid #569a20 !important;
  border-radius: var(--dz-pill-radius);
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23569A20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  color: #569a20 !important;
  font-family: var(--dz-font);
  font-size: 18px;
  font-weight: 600;
  box-shadow: none !important;
  cursor: pointer;
  height: 54px;
}

.view-block-down-zone .views-exposed-form select.form-select:focus {
  outline: none;
  border-color: #569a20 !important;
  box-shadow: 0 0 0 2px rgba(86, 154, 32, 0.2) !important;
}

.view-block-down-zone .views-exposed-form .form-item-field-downzone-type-target-id select.form-select {
  min-width: 190px;
}

.view-block-down-zone .views-exposed-form .form-item-sort-order select.form-select {
  width: 170px;
}

/* Search field with submit nested inside (JS moves .form-actions here) */
.view-block-down-zone .views-exposed-form .form-item-title {
  position: relative;
  flex: 1 1 320px;
  max-width: 339px;
  min-width: 220px;
}

.view-block-down-zone .views-exposed-form .form-item-title .form-text {
  width: 100%;
  padding: 9px 52px 9px 20px;
  border: 1px solid #569a20 !important;
  border-radius: var(--dz-pill-radius);
  background: #fff !important;
  font-family: var(--dz-font);
  font-size: 15px;
  line-height: 20px;
  color: #569a20;
  box-shadow: none !important;
}

.view-block-down-zone .views-exposed-form .form-item-title .form-text:focus {
  outline: none;
  border-color: #569a20 !important;
  box-shadow: 0 0 0 2px rgba(86, 154, 32, 0.2) !important;
}

.view-block-down-zone .views-exposed-form .form-item-title .form-text::placeholder {
  color: #9e9e9e;
  opacity: 1;
}

.view-block-down-zone .views-exposed-form .form-item-title .form-actions {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  float: none;
  z-index: 2;
}

/* Fallback if JS has not nested actions yet */
.view-block-down-zone .views-exposed-form .form--inline > .form-actions {
  position: relative;
  margin: 0;
  padding: 0;
  float: none;
}

.view-block-down-zone .views-exposed-form .form-actions .form-submit,
.view-block-down-zone .views-exposed-form .form-actions .btn {
  display: block;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  padding: 0;
  border: none;
  border-radius: 50% !important;
  background-color: #569a20 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='white' stroke-width='2'/%3E%3Cpath d='M20 20L16.5 16.5' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  box-shadow: none !important;
  cursor: pointer;
}

.view-block-down-zone .views-exposed-form .form-actions .form-submit:hover,
.view-block-down-zone .views-exposed-form .form-actions .btn:hover {
  background-color: #4a861c !important;
}

/* -------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------- */

.view-block-down-zone .view-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.view-block-down-zone .views-row {
  margin: 0;
}

.view-block-down-zone .downzone-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-height: 166px;
  padding: 24px 34px 24px 20px;
  background: #fff;
  border-radius: var(--dz-card-radius);
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

.view-block-down-zone .downzone-date {
  flex: 0 0 auto;
  min-width: 110px;
  padding-top: 2px;
  font-family: var(--dz-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--dz-text);
  white-space: nowrap;
  text-align: left;
  align-self: flex-start;
}

.view-block-down-zone .downzone-date time {
  color: inherit;
  font: inherit;
}

.view-block-down-zone .downzone-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/*
 * Keep DOM as date | content | right (no display:contents).
 * >1400: gap must stay 0 — gutters come from 104px / 18px tracks only.
 * Do not re-set card gap in a later min-width:993 rule (it would override this).
 * 993–1400: base flex gap:18px.
 */
@media screen and (min-width: 1401px) {
  .view-block-down-zone .downzone-card {
    display: grid;
    grid-template-columns: max-content 104px minmax(0, 1fr) 18px auto;
    grid-template-areas: "date . content . right";
    align-items: start;
    column-gap: 0;
    row-gap: 0;
    gap: 0;
  }

  .view-block-down-zone .downzone-date {
    grid-area: date;
    min-width: 0;
    align-self: start;
  }

  .view-block-down-zone .downzone-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .view-block-down-zone .downzone-right {
    grid-area: right;
    margin-left: 0;
    align-self: start;
  }
}

/* Badge shell (colors via modifiers only) */
.view-block-down-zone .downzone-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 78px;
  margin-bottom: 10px !important;
  padding: 5px 15px 3px 12px;
  border-radius: 50px;
  border: 1px solid #975ab6;
  background: #f8ebff;
  color: #975ab6;
  font-family: var(--dz-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}

.view-block-down-zone .downzone-badge.downzone-badge--course,
.view-block-down-zone .downzone-content > .downzone-badge.downzone-badge--course {
  border: 1px solid #4d95cb;
  background: #dcf0ff;
  color: #4d95cb;
}

.view-block-down-zone .downzone-badge.downzone-badge--workshop,
.view-block-down-zone .downzone-content > .downzone-badge.downzone-badge--workshop {
  border: 1px solid #ac885d;
  background: #fff4e6;
  color: #ac885d;
}

.view-block-down-zone .downzone-badge.downzone-badge--others,
.view-block-down-zone .downzone-content > .downzone-badge.downzone-badge--others {
  border: 1px solid #975ab6;
  background: #f8ebff;
  color: #975ab6;
}

.view-block-down-zone .downzone-title {
  margin: 0;
  font-family: var(--dz-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--dz-text);
  line-height: 26px;
}

.view-block-down-zone .downzone-desc {
  margin: 0;
  font-family: var(--dz-font);
  font-size: 18px;
  font-weight: 400;
  color: var(--dz-text);
  line-height: 26px;
  display: -webkit-box;
  overflow: hidden;
  max-width: 980px;
}

.view-block-down-zone .downzone-desc p {
  margin: 0;
  display: inline;
}

.view-block-down-zone .downzone-desc p + p::before {
  content: " ";
}

.view-block-down-zone .downzone-right {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-left: 0;
  padding-top: 0;
}

.view-block-down-zone .downzone-file-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--dz-text);
  font-family: var(--dz-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.view-block-down-zone .downzone-file-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../images/downzone-download.svg") center / contain no-repeat;
}

.view-block-down-zone .downzone-file-ext:empty::before {
  content: none;
}

.view-block-down-zone .downzone-download-btn,
.view-block-down-zone a.downzone-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 124px;
  height: 40px;
  min-width: 124px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: #B66CDD;
  color: #fff !important;
  font-family: var(--dz-font);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  border: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.view-block-down-zone .downzone-download-btn:hover,
.view-block-down-zone .downzone-download-btn:focus,
.view-block-down-zone a.downzone-download-btn:hover,
.view-block-down-zone a.downzone-download-btn:focus {
  background: #a055c8;
  color: #fff !important;
  text-decoration: none !important;
}

/* -------------------------------------------------------------------------
 * Pager — match site standard (custom_oscar.css blogs/news circles)
 * ------------------------------------------------------------------------- */

.view-block-down-zone .pager {
  margin-top: 0;
}

.view-block-down-zone .pager h4#pagination-heading {
  display: none;
}

.view-block-down-zone .pager .pagination,
.view-block-down-zone .pager__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 50px 0;
  margin: 0;
  list-style: none;
}

.view-block-down-zone .pager .page-item,
.view-block-down-zone .pager__item {
  margin: 0;
}

.view-block-down-zone .pager .page-link,
.view-block-down-zone .pager .page-item a,
.view-block-down-zone .pager .page-item > span.page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  margin: 0;
  border: 1px solid #B66CDD !important;
  /* Beat Bootstrap first/last-child asymmetric radius (was causing D-shape) */
  border-radius: 50% !important;
  background: #fff !important;
  color: #000 !important;
  font-family: var(--dz-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

.view-block-down-zone .pager .page-item:first-child .page-link,
.view-block-down-zone .pager .page-item:last-child .page-link {
  border-radius: 50% !important;
}

.view-block-down-zone .pager .page-item.active .page-link,
.view-block-down-zone .pager .page-item.is-active .page-link,
.view-block-down-zone .pager .page-item.is-active a,
.view-block-down-zone .pager .page-item:not(.pager__item--previous, .pager__item--next) a:hover,
.view-block-down-zone .pager .page-item:not(.pager__item--previous, .pager__item--next) a:focus {
  background: #B66CDD !important;
  border-color: #B66CDD !important;
  color: #fff !important;
  font-weight: 700;
}

.view-block-down-zone .pager .page-link .visually-hidden,
.view-block-down-zone .pager .page-item a .visually-hidden {
  display: none !important;
}

.view-block-down-zone .pager .pager__item--next .page-link,
.view-block-down-zone .pager .page-item.pager__item--next .page-link,
.view-block-down-zone .pager .pager__item--next a {
  background: url("../images/decro/page_next.svg") no-repeat center !important;
  background-size: 40px 40px !important;
  border: none !important;
  color: transparent !important;
  text-indent: -9999px;
  font-size: 0;
}

.view-block-down-zone .pager .pager__item--previous .page-link,
.view-block-down-zone .pager .page-item.pager__item--previous .page-link,
.view-block-down-zone .pager .pager__item--previous a {
  background: url("../images/decro/page_prev.svg") no-repeat center !important;
  background-size: 40px 40px !important;
  border: none !important;
  color: transparent !important;
  text-indent: -9999px;
  font-size: 0;
  /* Cancel custom_tom.css rotate(180deg) on previous (it uses page_next flipped;
     we already use page_prev.svg, so rotation would reverse the arrow). */
  transform: none !important;
}

.view-block-down-zone .pager .pager__item--first,
.view-block-down-zone .pager .pager__item--last,
.view-block-down-zone .pager .page-item.pager__item--first,
.view-block-down-zone .pager .page-item.pager__item--last {
  display: none !important;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 992px) {
  .view-block-down-zone .view-filters {
    margin-bottom: 30px;
  }

  /*
   * ≤992: one field per row (Category / Search / Sort), 30px gap.
   * Search input + submit share the same row so the magnifier never adds a blank band.
   */
  .view-block-down-zone .views-exposed-form .form--inline {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 30px;
    align-items: stretch;
    position: relative;
  }

  .view-block-down-zone .views-exposed-form .form-item-sort-by {
    display: none !important;
  }

  .view-block-down-zone .views-exposed-form .form-item-field-downzone-type-target-id {
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  .view-block-down-zone .views-exposed-form .form-item-title {
    grid-row: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    flex: none;
    position: relative;
  }

  .view-block-down-zone .views-exposed-form .form-item-field-downzone-type-target-id select.form-select,
  .view-block-down-zone .views-exposed-form .form-item-sort-order select.form-select,
  .view-block-down-zone .views-exposed-form .form-item-title .form-text {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .view-block-down-zone .views-exposed-form .form-item-title .form-actions {
    position: absolute !important;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3;
  }

  .view-block-down-zone .views-exposed-form .form--inline > .form-actions {
    grid-row: 2;
    grid-column: 1;
    justify-self: end;
    align-self: center;
    position: relative !important;
    right: 4px;
    top: auto;
    transform: none;
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    height: 0;
    overflow: visible;
    z-index: 3;
  }

  .view-block-down-zone .views-exposed-form .form--inline > .form-actions .form-submit,
  .view-block-down-zone .views-exposed-form .form--inline > .form-actions .btn {
    display: block;
  }

  .view-block-down-zone .views-exposed-form .form-item-sort-order {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0;
    margin-left: 0;
    width: 100%;
    gap: 10px;
  }

  .view-block-down-zone .views-exposed-form .form-item-sort-order > label {
    margin: 0;
  }

  /*
   * ≤992: same card stack as mobile (date → content → download row).
   */
  .view-block-down-zone .downzone-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px 16px;
    min-height: 0;
  }

  .view-block-down-zone .downzone-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .view-block-down-zone .downzone-badge,
  .view-block-down-zone .downzone-content > .downzone-badge {
    margin-bottom: 10px;
  }

  .view-block-down-zone .downzone-title {
    margin-top: 0;
  }

  .view-block-down-zone .downzone-date {
    min-width: 0;
  }

  .view-block-down-zone .downzone-title,
  .view-block-down-zone .downzone-desc {
    font-size: 16px;
    line-height: 1.4;
  }

  .view-block-down-zone .downzone-right {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .view-block-down-zone .downzone-download-btn,
  .view-block-down-zone a.downzone-download-btn {
    flex: 0 0 auto;
  }
}

@media screen and (max-width: 767px) {
  body.bp-downzone #block-i2-theme-content {
    padding-top: 160px;
  }
}

@media screen and (max-width: 480px) {
  .view-block-down-zone .downzone-right {
    flex-direction: column;
    align-items: stretch;
  }

  .view-block-down-zone .downzone-download-btn,
  .view-block-down-zone a.downzone-download-btn {
    width: 100%;
  }
}