/* ==========================================================================
   Jobson Garden — Blog & Gardening Tips
   Visual design matched to reference image (Hunting Light style).
   Strict adherence to brand color palette (Canvas White, Forest, Leaf).
   ========================================================================== */

/* --- Language Toolbar ---------------------------------------------------- */

.blog-toolbar {
  background: var(--secondary);
  border-bottom: 1px solid var(--border);
  padding-block: 0.75rem;
}
.blog-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.blog-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.blog-toolbar__tag {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.blog-toolbar__meta {
  font-size: 0.82rem;
  color: var(--muted-foreground);
}

/* Translator Button */
.btn--lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(44, 95, 56, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn--lang-toggle:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-1px);
}
.lang-icon {
  font-size: 1rem;
}

/* --- Hero Banner (Ref: Full-width scenic image with centered bold title) -- */


/* --- Split Grid Section -------------------------------------------------- */

.blog-main {
  background: var(--background);
  padding-block: var(--space-8) var(--space-20);
}
.blog-grid {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* --- Left Column: Overhanging Tall Cards --------------------------------- */

.blog-col-left {
  display: flex;
  flex-direction: column;
}

/* Card 1 floats up over hero image */
.blog-card-tall--overlap {
  margin-top: -6rem;
  position: relative;
  z-index: 10;
}
.blog-card-tall {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow:
    0 16px 36px -12px rgba(26, 35, 27, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.blog-card-tall__media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.blog-card-tall__body {
  padding: 2rem 1.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blog-card-tall__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}
.blog-card-tall__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.85rem 0;
}
.blog-card-tall__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--foreground);
  margin: 0 0 1.5rem 0;
}

/* Outline button matching reference */
.btn--blog-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  border-radius: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: 600;
}
.btn--blog-action:hover {
  border-color: var(--primary);
  background: var(--secondary);
  color: var(--primary);
}

/* --- Right Column: Alternating Editorial Rows ---------------------------- */

.blog-col-right {
  display: flex;
  flex-direction: column;
}

.blog-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 2rem;
  align-items: center;
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--border);
}
.blog-row--img-right {
  grid-template-columns: 1fr 190px;
}
.blog-row--img-right .blog-row__media {
  order: 2;
}
.blog-row--img-right .blog-row__body {
  order: 1;
}

.blog-row__media img {
  width: 190px;
  height: 170px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(26, 35, 27, 0.08);
  display: block;
}
.blog-row__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 0.4rem;
  font-weight: 700;
}
.blog-row__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.65rem 0;
}
.blog-row__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--foreground);
  margin: 0 0 1rem 0;
}
.blog-row__link {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}
.blog-row__link:hover {
  color: var(--primary);
}

/* --- Bottom Card: Natural Plant Care & Signature ------------------------- */

.blog-bottom-card {
  display: grid;
  /* Single column since the signature block was removed. The old second
     track was a fixed 200px reserved for it. */
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding-block: 2.5rem 1rem;
  margin-top: 0.5rem;
}
.blog-bottom-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.65rem 0;
}
.blog-bottom-card__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--foreground);
  margin: 0 0 1rem 0;
}
.blog-bottom-card__link {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf);
  font-weight: 700;
  cursor: pointer;
}
.blog-bottom-card__link:hover {
  color: var(--primary);
}
/* --- Interactive Reader Modal -------------------------------------------- */

.blog-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 35, 27, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.blog-modal-backdrop[hidden] {
  display: none !important;
}
.blog-modal {
  background: #ffffff;
  max-width: 38rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(26, 35, 27, 0.35);
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  animation: modalEnter 0.25s ease-out;
}
@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.blog-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--primary);
  border: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.blog-modal__close:hover {
  background: var(--primary);
  color: #ffffff;
}
.blog-modal__cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
}
.blog-modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 1rem 0;
}
.blog-modal__subtitle {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leaf);
  margin: 0 0 0.75rem 0;
}
.blog-modal__checklist ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.blog-modal__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--foreground);
}
.blog-modal__check {
  color: var(--leaf);
  font-weight: bold;
  flex-shrink: 0;
}
.blog-modal__actions {
  display: flex;
  justify-content: flex-end;
}

/* --- Consultation Strip -------------------------------------------------- */

.blog-cta-strip {
  background: var(--secondary);
  border-top: 1px solid var(--border);
  padding-block: var(--space-12);
}
.blog-cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.blog-cta-strip__text h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.blog-cta-strip__text p {
  color: var(--muted-foreground);
  font-size: 0.95rem;
}

/* --- Body copy ------------------------------------------------------------
   Every paragraph on this page is justified. Hyphenation is on with it: at
   these measures, justification without it opens rivers of white space
   between words, and letting long words break is what closes them. The
   headings above each paragraph keep their own alignment — only the running
   text is justified.
   -------------------------------------------------------------------------- */

.blog-card-tall__text,
.blog-row__text,
.blog-bottom-card__text,
.blog-modal__content p,
.blog-cta-strip__text p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --- Responsive Breakpoints for Blog ------------------------------------- */

@media (max-width: 960px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .blog-col-left {
    max-width: 440px;
    margin-inline: auto;
    width: 100%;
  }
  /* The overlap is a two-column device: on a wide screen this card sits in
     the left rail and rides up over the foot of the cover banner. Once the
     grid stacks there is no rail to ride in, and the negative margin simply
     pulls the card up over the cover's own copy — it was cutting the second
     line of the lede in half. Sit below the banner instead. */
  .blog-card-tall--overlap {
    margin-top: 0;
  }
  .blog-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .blog-row--img-right {
    grid-template-columns: 1fr;
  }
  .blog-row--img-right .blog-row__media {
    order: 0;
  }
  .blog-row--img-right .blog-row__body {
    order: 1;
  }
  .blog-row__media img {
    width: 100%;
    height: 200px;
  }
  .blog-bottom-card {
    text-align: center;
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .blog-toolbar__meta {
    display: none;
  }
  .blog-cta-strip__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .blog-cta-strip .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}