/*
 Theme Name: GRL Podcast Base
 Description: Golden Rule Live Podcast Framework built on Astra.
 Author: Golden Rule Live
 Template: astra
 Version: 1.0.0
*/

/* ================================
   Episode Layout
================================ */

/* Full-bleed section */
.single-post .entry-content .bleed-section{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  padding-left: 20px;
  padding-right: 20px;
}

/* Centered inner content */
.single-post .entry-content .bleed-section .bleed-inner{
  max-width: 1200px;  /* match your site container if you want */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


/* ================================
   Episode Tags
================================ */

/* Episode Tags as Buttons */
.episode-tags a {
    display: inline-block;
    padding: 6px 14px;
    margin: 4px 6px 4px 0;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important; 
    border-radius: 50px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    transition: all 0.2s ease;
}

.episode-tags a:hover {
    background-color: #19478f;
    color: #fff;
    border-color: #111;
}



/* ================================
   Share Buttons
================================ */

/* Wrapper */
.episode-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Baseline pill style (intentionally slightly different from tags) */
.episode-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 14px;
  margin: 4px 6px 4px 0;

  font-size: 15px;
  font-weight: 600;

  text-decoration: none !important;
  border-radius: 50px;

  border: 1px solid rgba(25, 71, 143, 0.25);
  background-color: #19478f;
  transition: all 0.2s ease;
  cursor: pointer;
  color: inherit;

  appearance: none;
  -webkit-appearance: none;
}

/* Hover style (share can diverge later) */
.episode-share__btn:hover {
  background-color: #f5f5f5;
  color: #1c285a !important;
  border-color: #111;
}

/* Icon alignment */
.share-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* Toast */
.episode-share__toast {
  font-size: 13px;
  opacity: 0.8;
  margin-left: 6px;
}

/* ================================
   Platform Icons (icon-only)
================================ */

.episode-platform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.25rem;
}

.episode-platform__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  text-decoration: none !important;
  border-radius: 0px;
  transition: all 0.2s ease;
}

.episode-platform__icon {
  width: 50px;
  height: 50px;
  display: block;
}

.episode-platform__btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* ======================================================
   IMAGE MASK UTILITIES
   Base + Two Mask Variants + Square Frame
====================================================== */

/* Base mask behavior (apply to the WRAPPER element) */
.grl-mask {
  display: block;
  overflow: hidden;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

/* Mask SVG: Portrait/Tall (available for later use) */
.grl-mask--tta-portrait {
  -webkit-mask-image: url('/wp-content/themes/grl-podcast-base/assets/masks/talking-ta-mask.svg');
  mask-image: url('/wp-content/themes/grl-podcast-base/assets/masks/talking-ta-mask.svg');
}

/* Mask SVG: Square (current featured choice) */
.grl-mask--tta-square {
  -webkit-mask-image: url('/wp-content/themes/grl-podcast-base/assets/masks/talking-ta-alt-mask.svg');
  mask-image: url('/wp-content/themes/grl-podcast-base/assets/masks/talking-ta-alt-mask.svg');
}

/* Frame ratio: Square */
.grl-frame--square {
  aspect-ratio: 1 / 1;
}

/* Frame ratio: Portrait/Tall (matches talking-ta-mask.svg viewBox ratio) */
.grl-frame--portrait {
  aspect-ratio: 115.6 / 155.6;
}


/* Make inner image fill the frame cleanly */
.grl-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ======================================================
   TAG ARCHIVE FEATURED THUMB SIZE FIX
====================================================== */

.grl-tag-featured__thumbwrap {
  width: 100%;
  max-width: 420px; /* adjust up/down to taste */
}

.grl-tag-featured__card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.grl-tag-episodes__thumb {
  width: 140px; /* adjust */
  flex: 0 0 140px;
}


@media (max-width: 768px) {
  .grl-tag-featured__card {
    flex-direction: column;
    gap: 16px;
  }

  .grl-tag-featured__thumbwrap {
    max-width: 100%;
  }
}