/**
 * soapKit — Single Post widget suite
 *
 * Default presentation for the seven dynamic "Single Post" widgets:
 *   Post Title · Post Meta · Post Featured Image · Post Content ·
 *   Post Terms · Post Author · Post Related
 *
 * These are DEFAULTS, not the design. Every value here is overridable from
 * the Elementor panel, and Elementor's generated rules (which target
 * `.elementor-element-xxxx`) are more specific, so a designer's change always
 * wins. The palette matches the rest of the site so the template looks right
 * the moment it is dropped in, with nothing configured.
 *
 * Palette
 *   deep   #021D11   primary #092210   secondary #144B24
 *   accent #E28F3C   body    #5A6B5A   panel     #F4F1E6
 */

/* ============================================================
 * Shared
 * ============================================================ */

.elementor-widget-soapkits_post_title,
.elementor-widget-soapkits_post_meta,
.elementor-widget-soapkits_post_featured_image,
.elementor-widget-soapkits_post_content,
.elementor-widget-soapkits_post_terms,
.elementor-widget-soapkits_post_author,
.elementor-widget-soapkits_post_related {
  --skp-deep: #021d11;
  --skp-primary: #092210;
  --skp-secondary: #144b24;
  --skp-accent: #e28f3c;
  --skp-body: #5a6b5a;
  --skp-panel: #f4f1e6;
  --skp-cream: #faf7f0;
  --skp-radius: 20px;
  --skp-content: 720px;
}

/* ============================================================
 * Post Title
 * ============================================================ */

.soapkits-post-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.soapkits-post-title > a {
  color: inherit;
  text-decoration: none;
}

.soapkits-post-title > a:hover {
  color: var(--skp-accent);
}

/* ============================================================
 * Post Meta (byline)
 * ============================================================ */

.soapkits-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.4;
}

.soapkits-post-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.soapkits-post-meta__sep {
  opacity: 0.55;
}

/* ============================================================
 * Post Featured Image
 * ============================================================ */

.soapkits-post-image {
  margin: 0;
}

.soapkits-post-image__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--skp-radius);
  background-color: var(--skp-panel);
}

.soapkits-post-image__frame img,
.soapkits-post-image__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.soapkits-post-image__frame--empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: var(--skp-body);
  font-size: 0.95rem;
}

/* ============================================================
 * Post Content
 * ============================================================ */

.soapkits-post-content {
  margin: 0;
}

.soapkits-post-content__inner {
  margin-inline: auto;
  color: var(--skp-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.soapkits-post-content__inner > * + * {
  margin-block-start: 1.4em;
}

.soapkits-post-content__inner h1,
.soapkits-post-content__inner h2,
.soapkits-post-content__inner h3,
.soapkits-post-content__inner h4,
.soapkits-post-content__inner h5,
.soapkits-post-content__inner h6 {
  margin-block: 1.8em 0.6em;
  color: var(--skp-primary);
  line-height: 1.25;
  text-wrap: balance;
}

.soapkits-post-content__inner h2 {
  font-size: 1.75rem;
}

.soapkits-post-content__inner h3 {
  font-size: 1.35rem;
}

.soapkits-post-content__inner a {
  color: var(--skp-secondary);
  text-underline-offset: 3px;
}

.soapkits-post-content__inner img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.soapkits-post-content__inner blockquote {
  margin-inline: 0;
  padding: 0.35rem 0 0.35rem 1.5rem;
  border-left: 3px solid var(--skp-accent);
  color: var(--skp-body);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.6;
}

.soapkits-post-content__inner blockquote cite {
  display: block;
  margin-block-start: 0.75rem;
  color: var(--skp-primary);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;
}

.soapkits-post-content__inner ul,
.soapkits-post-content__inner ol {
  padding-inline-start: 1.35em;
}

.soapkits-post-content__inner li + li {
  margin-block-start: 0.5em;
}

.soapkits-post-content__inner hr {
  border: 0;
  border-top: 1px solid rgba(9, 34, 16, 0.12);
  margin-block: 2.5em;
}

/* ============================================================
 * Post Terms
 * ============================================================ */

.soapkits-post-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.soapkits-post-terms a,
.soapkits-post-terms span {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background-color: #eaf3de;
  color: var(--skp-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.soapkits-post-terms a:hover {
  background-color: var(--skp-primary);
  color: var(--skp-cream);
}

.soapkits-post-terms__label {
  background: none !important;
  padding-inline: 0 !important;
  color: var(--skp-body) !important;
  font-weight: 500 !important;
}

/* ============================================================
 * Post Author
 * ============================================================ */

.soapkits-post-author {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--skp-radius);
  background-color: var(--skp-panel);
}

.soapkits-post-author__avatar {
  flex: 0 0 auto;
  line-height: 0;
}

.soapkits-post-author__avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.soapkits-post-author__body {
  flex: 1 1 auto;
  min-width: 0;
}

.soapkits-post-author__name {
  margin: 0 0 0.35rem;
  color: var(--skp-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.soapkits-post-author__name a {
  color: inherit;
  text-decoration: none;
}

.soapkits-post-author__bio {
  margin: 0;
  color: var(--skp-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Stack on narrow screens. `flex-basis` follows the MAIN axis, so leaving the
   row values in place would turn them into HEIGHTS once the card becomes a
   column and the card would balloon. */
@media (max-width: 600px) {
  .soapkits-post-author {
    flex-direction: column;
    gap: 0.9rem;
  }

  .soapkits-post-author__avatar img {
    width: 48px;
    height: 48px;
  }
}

/* ============================================================
 * Post Related
 * ============================================================ */

.soapkits-post-related__heading {
  margin: 0 0 1.25rem;
  color: var(--skp-primary);
  font-size: 1.35rem;
  font-weight: 700;
}

.soapkits-post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.soapkits-post-related__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background-color: #ffffff;
}

.soapkits-post-related__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  line-height: 0;
}

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

.soapkits-post-related__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 0 0;
}

.soapkits-post-related__title {
  margin: 0;
  color: var(--skp-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.soapkits-post-related__title a {
  color: inherit;
  text-decoration: none;
}

.soapkits-post-related__title a:hover {
  color: var(--skp-accent);
}

.soapkits-post-related__date {
  margin-block-start: auto;
  color: var(--skp-body);
  font-size: 0.8125rem;
}

@media (max-width: 1024px) {
  .soapkits-post-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .soapkits-post-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}