/* =============================================================
   Wellness Mama – Drupal 11 Post Top Area CSS
   Two-column: left = category pill + title + author + read time
              right = full-bleed featured image
   ============================================================= */

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  --wm-color-primary:    #0f766e;  /* teal green                 */
  --wm-color-secondary:  #ecf4f4;  /* light teal-grey (pill bg)  */
  --wm-color-contrast:   #0a0a0a;  /* near-black text            */
  --wm-color-base:       #ffffff;

  --wm-font-outfit:      Oswald, sans-serif;
  --wm-font-freight:     Oswald, serif;

  /* Font sizes */
  --wm-font-size-x-tiny: 14px;
  --wm-font-size-tiny:   16px;
  --wm-font-size-xs:     18px;
  --wm-font-size-small:  20px;
  --wm-font-size-large:  clamp(24px, 1.5rem + ((1vw - 6.4px) * 0.938), 30px);
  --wm-font-size-xlarge: clamp(30px, 1.875rem + ((1vw - 6.4px) * 0.938), 36px);

  /* Font weights */
  --wm-fw-regular: 400;
  --wm-fw-medium:  500;
  --wm-fw-bold:    700;

  /* Line heights */
  --wm-lh-heading: 1.2;
  --wm-lh-body:    1.75;
  --wm-lh-medium:  1.5;

  /* Spacing */
  --wm-spacing-xs:     20px;
  --wm-spacing-small:  clamp(30px, 4vw, 40px);
  --wm-spacing-medium: clamp(40px, 6vw, 60px);
  --wm-spacing-gap:    30px;
}

/* ═══════════════════════════════════════════════════════════
   VIEWS WRAPPER  (Drupal view output)
   ═══════════════════════════════════════════════════════════ */

/* Hide the raw read-time field that sits outside post_top_area_cont */
.view-post_top_area .views-field-node-read-time {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   MAIN CONTAINER  –  50/50 two-column grid
   ═══════════════════════════════════════════════════════════ */
.post_top_area_cont {
  display:             grid;
  grid-template-columns: 1fr 1fr;
  min-height:          480px;
  background-color:    var(--wm-color-base);
  width:               100%;
  box-sizing:          border-box;
}

/* ═══════════════════════════════════════════════════════════
   LEFT COLUMN  –  text content
   ═══════════════════════════════════════════════════════════ */
.post_top_area_left_cont {
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  padding:         clamp(30px, 5vw, 60px) clamp(20px, 4vw, 50px)
                   clamp(30px, 5vw, 60px) clamp(20px, 4vw, 50px);
  box-sizing:      border-box;
  gap:             0;
}

/* ── Category Pill / Tag ─────────────────────────────────── */
.top_post_type_cont {
  margin-bottom: 16px;
}

.top_post_type_cont a {
  display:          inline-block;
  font-family:      var(--wm-font-outfit);
  font-size:        var(--wm-font-size-x-tiny);   /* 14px */
  font-weight:      var(--wm-fw-medium);
  letter-spacing:   0.5px;
  text-transform:   uppercase;
  color:            var(--wm-color-contrast);
  background-color: var(--wm-color-secondary);    /* #ecf4f4 */
  border-radius:    40px;
  padding:          6px 14px;
  text-decoration:  none;
  line-height:      var(--wm-lh-medium);
  transition:       color 0.2s ease, filter 0.2s ease;
}

.top_post_type_cont a:hover,
.top_post_type_cont a:focus {
  color:   var(--wm-color-primary);
  filter:  brightness(97%);
  outline: none;
}

/* ── Post Title ───────────────────────────────────────────── */
.top_post_title_cont {
  margin-bottom: 24px;
}

.top_post_title_cont a {
  font-family:     var(--wm-font-outfit);
  font-size:       clamp(28px, 3vw + 12px, 42px);
  font-weight:     var(--wm-fw-bold);
  color:           var(--wm-color-contrast);
  line-height:     var(--wm-lh-heading);           /* 1.2 */
  text-decoration: none;
  letter-spacing:  -0.02em;
  display:         block;
  transition:      color 0.2s ease;
}

.top_post_title_cont a:hover,
.top_post_title_cont a:focus {
  color:   var(--wm-color-primary);
  outline: none;
}

/* ── Author Info Row  (avatar + name + date) ──────────────── */
.top_post_author_info_cont {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 20px;
}

/* Author avatar */
.author_img_cont {
  flex-shrink: 0;
  width:       46px;
  height:      46px;
  border-radius: 50%;
  overflow:    hidden;
}

.author_img_cont img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Name + date stack */
.author_name_date_cont {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.author_name_cont {
  font-family:    var(--wm-font-outfit);
  font-size:      var(--wm-font-size-tiny);   /* 16px */
  font-weight:    var(--wm-fw-bold);
  color:          var(--wm-color-contrast);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height:    var(--wm-lh-medium);
}

.author_date_cont,
.author_date_cont time {
  font-family: var(--wm-font-outfit);
  font-size:   var(--wm-font-size-tiny);   /* 16px */
  font-weight: var(--wm-fw-regular);
  color:       var(--wm-color-contrast);
  line-height: var(--wm-lh-medium);
}

/* ── Reading Time ─────────────────────────────────────────── */
.top_post_read_time_cont {
  font-family:  var(--wm-font-freight);
  font-size:    var(--wm-font-size-tiny);   /* 16px */
  font-weight:  var(--wm-fw-bold);
  color:        var(--wm-color-contrast);
  line-height:  var(--wm-lh-body);
}

/* Prepend "Reading Time: " label via pseudo-element */
.top_post_read_time_cont::before {
  content:     "Reading Time: ";
  font-weight: var(--wm-fw-bold);
}

/* Append " minutes" only if not already present
   (the view outputs the number; add unit if needed) */

/* ── Affiliate / disclaimer note below read time ─────────── */
.top_post_affiliate_cont {
  margin-top:  10px;
  font-family: var(--wm-font-freight);
  font-size:   var(--wm-font-size-tiny);
  font-weight: var(--wm-fw-regular);
  color:       var(--wm-color-contrast);
  line-height: var(--wm-lh-body);
}

.top_post_affiliate_cont a {
  color:                  var(--wm-color-primary);
  text-decoration:        underline;
  text-decoration-thickness: 1px;
  text-underline-offset:  2px;
  transition:             color 0.2s ease;
}

.top_post_affiliate_cont a:hover {
  color: var(--wm-color-contrast);
}

/* ═══════════════════════════════════════════════════════════
   RIGHT COLUMN  –  featured image (full-bleed)
   ═══════════════════════════════════════════════════════════ */
.post_top_area_right_cont {
  overflow:   hidden;
  position:   relative;
  min-height: 380px;
}

.post_top_area_right_image_cont {
  width:      100%;
  height:     100%;
  position:   absolute;
  inset:      0;
}

.post_top_area_right_image_cont img {
  width:          100%;
  height:         100%;
  /*object-fit:     cover;*/
  object-position: center center;
  display:        block;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Tablet – stack; image goes below text */
@media (max-width: 860px) {
  .post_top_area_cont {
    grid-template-columns: 1fr;
    min-height:            auto;
  }

  /* Show image first on mobile by reordering */
  .post_top_area_right_cont {
    order:      -1;
    min-height: 300px;
    position:   relative;
  }

  .post_top_area_right_image_cont {
    position: relative;
    inset:    unset;
    height:   300px;
  }

  .post_top_area_left_cont {
    padding: var(--wm-spacing-xs);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .top_post_title_cont a {
    font-size: clamp(22px, 6vw, 28px);
  }

  .post_top_area_right_image_cont {
    height: 220px;
  }
}