/* =========================================================
   HOLISTIC LIFE WITH SHILPI
   PROGRAMME CARD — STANDALONE COMPONENT V3

   File:
   /wp-content/plugins/hls-core/assets/css/hls-programme-card.css

   Designed for:
   - Homepage programme grids
   - 2-column and 3-column Elementor Loop Grids
   - Programme / Courses pages
   - Future landing pages using [hls_programme_card]

   Responsive strategy:
   - Compact layout is the safe default.
   - CSS container queries switch wider cards to the
     spacious reference-style 3-column information panel.
   - This means a 3-column desktop grid can use the compact
     mobile-style card without depending on viewport width.
========================================================= */


/* =========================================================
   0. COMPONENT TOKENS
========================================================= */

.hls-pcard {
  --hls-pcard-deep: #214e4a;
  --hls-pcard-deep-dark: #173d3a;
  --hls-pcard-teal: #477a73;
  --hls-pcard-logo-teal: #00a79d;
  --hls-pcard-sage: #dce5d9;
  --hls-pcard-cream: #f7f3ea;
  --hls-pcard-soft: #fcfaf5;
  --hls-pcard-white: #ffffff;
  --hls-pcard-terracotta: #c47c61;
  --hls-pcard-gold: #d5b47d;
  --hls-pcard-text: #26312f;
  --hls-pcard-muted: #66726e;
  --hls-pcard-border: rgba(33, 78, 74, 0.14);

  --hls-pcard-heading:
    "DM Serif Display",
    Georgia,
    serif;

  --hls-pcard-body:
    "Manrope",
    Arial,
    sans-serif;

  --hls-pcard-radius: 22px;
  --hls-pcard-image-radius: 18px;

  position: relative;

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  padding: 18px;

  overflow: hidden;

  border: 1px solid var(--hls-pcard-border);
  border-radius: var(--hls-pcard-radius);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffefb 100%
    );

  box-shadow:
    0 10px 28px rgba(38, 49, 47, .045),
    0 2px 8px rgba(38, 49, 47, .025);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;

  /* Allows layout to respond to CARD width, not only screen width. */
  container-type: inline-size;
  container-name: hls-programme-card;
}


.hls-pcard,
.hls-pcard * {
  box-sizing: border-box;
}


.hls-pcard:hover {
  transform: translateY(-4px);

  border-color:
    rgba(33, 78, 74, .20);

  box-shadow:
    0 22px 46px rgba(38, 49, 47, .10),
    0 5px 14px rgba(38, 49, 47, .035);
}


/* =========================================================
   1. TOP ROW — COMPACT / 3-COLUMN GRID DEFAULT
========================================================= */

.hls-pcard-head {
  display: grid;
  grid-template-columns: 1fr;

  gap: 9px;

  align-items: start;

  margin-bottom: 14px;
}


.hls-pcard-title {
  min-width: 0;

  margin: 0 !important;

  font-family:
    var(--hls-pcard-heading) !important;

  font-size: 27px !important;

  line-height: 1.12 !important;

  font-weight: 400 !important;

  letter-spacing: -.015em;

  color:
    var(--hls-pcard-deep) !important;

  text-wrap: balance;
}


.hls-pcard-title a {
  color: inherit !important;
  text-decoration: none !important;
}


.hls-pcard-title a:hover {
  color:
    var(--hls-pcard-deep-dark) !important;
}


/* =========================================================
   2. FORMAT BADGE
========================================================= */

.hls-pcard-format {
  width: fit-content;

  min-height: 29px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    0 12px;

  border:
    1px solid
    rgba(255, 255, 255, .35);

  border-radius:
    999px;

  background:
    var(--hls-pcard-teal);

  box-shadow:
    0 6px 16px
    rgba(33, 78, 74, .12);

  font-family:
    var(--hls-pcard-body);

  font-size: 10px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: .075em;

  text-transform: uppercase;

  white-space: nowrap;

  color: #ffffff;
}


.hls-pcard-format-online {
  background:
    var(--hls-pcard-teal);
}


.hls-pcard-format-in_person {
  background:
    var(--hls-pcard-deep);
}


.hls-pcard-format-hybrid {
  background:
    var(--hls-pcard-terracotta);
}


/* =========================================================
   3. IMAGE AREA
========================================================= */

.hls-pcard-image {
  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-radius:
    var(--hls-pcard-image-radius);

  background:
    linear-gradient(
      135deg,
      #edf4ef,
      #dfe9e2
    );

  text-decoration: none !important;
}


.hls-pcard-img {
  width: 100% !important;
  height: 100% !important;

  display: block;

  object-fit: cover;
  object-position: center;

  transition:
    transform .45s ease;
}


.hls-pcard:hover
.hls-pcard-img {
  transform:
    scale(1.025);
}


/* No featured image */

.hls-pcard-placeholder {
  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(255, 255, 255, .75),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #e8efea,
      #dce5d9
    );

  font-family:
    var(--hls-pcard-body);

  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;

  text-align: center;

  color:
    var(--hls-pcard-teal);
}


/* =========================================================
   4. OPTIONAL IMAGE BADGE
========================================================= */

.hls-pcard-image-badge {
  position: absolute;

  z-index: 3;

  top: 12px;
  right: 12px;

  min-height: 29px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255, 255, 255, .55);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, .93);

  box-shadow:
    0 7px 18px
    rgba(38, 49, 47, .09);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-family:
    var(--hls-pcard-body);

  font-size: 9px;
  line-height: 1;
  font-weight: 700;

  letter-spacing: .07em;
  text-transform: uppercase;

  color:
    var(--hls-pcard-terracotta);
}


/* =========================================================
   5. STATUS BADGE
========================================================= */

.hls-pcard-status {
  position: absolute;

  z-index: 3;

  top: 13px;
  left: 13px;

  min-height: 30px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255, 255, 255, .55);

  border-radius:
    999px;

  box-shadow:
    0 7px 18px
    rgba(38, 49, 47, .10);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-family:
    var(--hls-pcard-body);

  font-size: 9px;
  line-height: 1;
  font-weight: 700;

  letter-spacing: .07em;
  text-transform: uppercase;
}


.hls-pcard-status > span {
  width: 6px;
  height: 6px;

  display: block;

  flex: 0 0 auto;

  border-radius: 50%;

  background: currentColor;
}


.hls-pcard-status-open {
  background:
    rgba(230, 239, 225, .95);

  color:
    #315b48;
}


.hls-pcard-status-coming_soon {
  background:
    rgba(247, 237, 219, .96);

  color:
    #8a682f;
}


.hls-pcard-status-waitlist {
  background:
    rgba(246, 227, 218, .96);

  color:
    #a15b45;
}


.hls-pcard-status-closed {
  background:
    rgba(237, 239, 238, .96);

  color:
    #65706c;
}


/* =========================================================
   6. INFO PANEL — COMPACT DEFAULT
   Used for 3-column desktop cards + mobile cards.
========================================================= */

.hls-pcard-info {
  position: relative;

  z-index: 4;

  width:
    calc(100% - 18px);

  display: grid;

  grid-template-columns: 1fr;

  gap: 0;

  margin:
    -24px auto 0;

  overflow: hidden;

  border:
    1px solid
    rgba(33, 78, 74, .08);

  border-radius: 15px;

  background:
    rgba(248, 246, 241, .98);

  box-shadow:
    0 12px 28px
    rgba(38, 49, 47, .075);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* Count classes stay available for wide-card mode. */

.hls-pcard-info-count-1,
.hls-pcard-info-count-2,
.hls-pcard-info-count-3 {
  grid-template-columns: 1fr;
}


.hls-pcard-info-item {
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(84px, .72fr)
    minmax(0, 1.28fr);

  gap: 12px;

  align-items: center;

  padding:
    12px 13px;
}


.hls-pcard-info-item
+
.hls-pcard-info-item {
  border-top:
    1px solid
    rgba(33, 78, 74, .08);
}


.hls-pcard-info-label {
  display: block;

  margin: 0;

  font-family:
    var(--hls-pcard-body);

  font-size: 9px;
  line-height: 1.25;
  font-weight: 700;

  letter-spacing: .08em;
  text-transform: uppercase;

  color:
    var(--hls-pcard-terracotta);
}


.hls-pcard-info-value {
  display: block;

  min-width: 0;

  font-family:
    var(--hls-pcard-body);

  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;

  text-align: right;

  color:
    var(--hls-pcard-text);

  overflow-wrap: break-word;
}


/* =========================================================
   7. CTA
========================================================= */

.hls-pcard-actions {
  display: flex;

  align-items: center;
  justify-content: center;

  margin-top: auto;

  padding-top: 18px;
}


.hls-pcard-btn {
  width: 100%;

  min-height: 48px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    0 22px;

  border:
    1px solid
    transparent;

  border-radius:
    999px;

  background:
    var(--hls-pcard-deep);

  box-shadow:
    0 10px 24px
    rgba(33, 78, 74, .15);

  font-family:
    var(--hls-pcard-body);

  font-size: 12px;
  line-height: 1;
  font-weight: 700;

  letter-spacing: .05em;
  text-transform: uppercase;

  color:
    #ffffff !important;

  text-decoration:
    none !important;

  transition:
    transform .24s ease,
    background-color .24s ease,
    box-shadow .24s ease;
}


.hls-pcard-btn:hover {
  transform:
    translateY(-2px);

  background:
    var(--hls-pcard-deep-dark);

  color:
    #ffffff !important;

  box-shadow:
    0 14px 30px
    rgba(33, 78, 74, .21);
}


.hls-pcard-btn-arrow {
  font-size: 15px;
  line-height: 1;
}


/* =========================================================
   8. ACCESSIBILITY
========================================================= */

.hls-pcard a:focus-visible,
.hls-pcard button:focus-visible {
  outline:
    3px solid
    rgba(0, 167, 157, .26);

  outline-offset: 4px;
}


/* =========================================================
   9. ELEMENTOR LOOP GRID SUPPORT
========================================================= */

.elementor-loop-container
.e-loop-item {
  min-width: 0;
}


.elementor-loop-container
.e-loop-item:has(.hls-pcard) {
  height: 100%;
}


.elementor-loop-container
.e-loop-item:has(.hls-pcard)
>
.elementor-element,

.elementor-loop-container
.e-loop-item:has(.hls-pcard)
>
.e-con,

.elementor-loop-container
.e-loop-item:has(.hls-pcard)
.elementor-shortcode {
  height: 100%;
}


.elementor-loop-container
.e-loop-item:has(.hls-pcard)
.elementor-shortcode {
  display: flex;
}


.elementor-loop-container
.e-loop-item:has(.hls-pcard)
.hls-pcard {
  flex: 1 1 auto;
}


/* =========================================================
   10. WIDE CARD MODE
   Activates only when the individual card is genuinely wide (680px+).

   Typical use:
   - 2 columns on desktop
   - 1 column on wider layouts

   3-column desktop cards stay in the compact layout above, including at reduced browser zoom.
========================================================= */

@container hls-programme-card (min-width: 680px) {

  .hls-pcard-head {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 16px;

    align-items: start;

    margin-bottom: 16px;
  }


  .hls-pcard-title {
    font-size:
      clamp(27px, 4cqw, 32px) !important;
  }


  .hls-pcard-format {
    justify-self: end;

    margin-top: 1px;
  }


  .hls-pcard-image {
    aspect-ratio: 16 / 10;
  }


  .hls-pcard-info {
    width:
      calc(100% - 34px);

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    margin-top:
      -38px;
  }


  .hls-pcard-info-count-1 {
    grid-template-columns: 1fr;
  }


  .hls-pcard-info-count-2 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .hls-pcard-info-count-3 {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .hls-pcard-info-item {
    display: block;

    padding:
      16px 17px 15px;
  }


  .hls-pcard-info-item
  +
  .hls-pcard-info-item {
    border-top: 0;

    border-left:
      1px solid
      rgba(33, 78, 74, .08);
  }


  .hls-pcard-info-label {
    margin-bottom: 6px;
  }


  .hls-pcard-info-value {
    font-size: 14px;

    text-align: left;
  }


  .hls-pcard-actions {
    padding-top: 21px;
  }


  .hls-pcard-btn {
    width: auto;

    min-width: 160px;

    min-height: 46px;

    padding:
      0 26px;
  }

}


/* =========================================================
   11. TABLET / SMALLER VIEWPORT REFINEMENT
========================================================= */

@media (max-width: 1024px) {

  .hls-pcard {
    padding: 16px;
  }

}


/* =========================================================
   12. MOBILE
   Keep the compact card layout that already looked good.
========================================================= */

@media (max-width: 767px) {

  .hls-pcard {
    padding: 14px;

    border-radius: 20px;
  }


  .hls-pcard-title {
    font-size: 25px !important;

    line-height: 1.15 !important;
  }


  .hls-pcard-format {
    min-height: 28px;

    padding:
      0 10px;

    font-size: 9px;
  }


  .hls-pcard-image {
    border-radius: 16px;
  }


  .hls-pcard-info {
    width:
      calc(100% - 16px);

    margin-top:
      -23px;

    border-radius: 14px;
  }


  .hls-pcard-info-item {
    padding:
      11px 13px;
  }


  .hls-pcard-info-value {
    font-size: 13px;
  }


  .hls-pcard-actions {
    padding-top: 18px;
  }


  .hls-pcard-btn {
    min-height: 48px;

    font-size: 12px;
  }

}


/* =========================================================
   13. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .hls-pcard {
    padding: 13px;
  }


  .hls-pcard-title {
    font-size: 24px !important;
  }


  .hls-pcard-info-item {
    grid-template-columns:
      82px
      minmax(0, 1fr);

    gap: 10px;

    padding:
      11px 12px;
  }


  .hls-pcard-info-label {
    font-size: 8px;
  }


  .hls-pcard-info-value {
    font-size: 12px;
  }

}


/* =========================================================
   14. VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .hls-pcard {
    padding: 11px;
  }


  .hls-pcard-title {
    font-size: 23px !important;
  }


  .hls-pcard-info-item {
    grid-template-columns:
      76px
      minmax(0, 1fr);

    padding:
      10px 11px;
  }

}


/* =========================================================
   15. FALLBACK FOR BROWSERS WITHOUT CONTAINER QUERIES

   Compact layout remains the default, so even without support,
   3-column desktop cards and mobile cards remain usable.
========================================================= */

@supports not (container-type: inline-size) {

  .hls-pcard {
    container-type: normal;
  }

}


/* =========================================================
   16. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hls-pcard,
  .hls-pcard-img,
  .hls-pcard-btn {
    transition: none;
  }

}