/* ==========================================================================
   Single Post — Mobile / Tablet Responsive Styles
   Loaded only on single-post.php via single-post.php's <link> tag.
   Place this file at: wp-content/themes/webs_firm/css/single-post-mobile.css
   ========================================================================== */

/* Safety net: never let images or embeds overflow the viewport width */
.tf-single-layout img,
.jop-hero-right img,
#content img,
#content iframe,
#content table {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------- */
/* Tablet (≤ 1024px): keep TOC + content side by side, drop form below    */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .tf-single-layout {
    display: flex;
    flex-wrap: wrap;
  }

  .tf-left-toc {
    flex: 1 1 30%;
  }

  #primary.content-area {
    flex: 1 1 65%;
  }

  .tf-right-form {
    flex: 1 1 100%;
    order: 3;
    margin-top: 24px;
  }
}

/* ---------------------------------------------------------------------- */
/* Mobile (≤ 768px): full single-column stack                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Hero: stack title/meta above the featured image */
  .jop-blog-hero .jop-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .jop-hero-left,
  .jop-hero-right {
    width: 100%;
  }

  .jop-hero-title {
    font-size: 24px;
    line-height: 1.3;
  }

  .jop-hero-meta {
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px;
  }

  .jop-hero-right img {
    width: 100%;
    border-radius: 8px;
  }

  /* Main layout: single column, natural reading order */
  .container.tf-single-layout {
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
  }

  .tf-left-toc,
  #primary.content-area,
  .tf-right-form {
    width: 100%;
    flex: none;
  }

  /* TOC: compact scrollable card instead of a full-height sidebar */
  .tf-left-toc {
    order: 1;
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    max-height: 260px;
    overflow-y: auto;
  }

  /* Article content */
  #primary.content-area {
    order: 2;
  }

  /* Contact form: last, full width, comfortable tap targets */
  .tf-right-form {
    order: 3;
    margin-top: 24px;
    padding: 16px;
  }

  .tf-right-form input,
  .tf-right-form textarea,
  .tf-right-form select {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
  }
}

/* ---------------------------------------------------------------------- */
/* Small phones (≤ 480px)                                                  */
/* ---------------------------------------------------------------------- */
@media (max-width: 480px) {

  .jop-hero-title {
    font-size: 20px;
  }

  .jop-hero-category {
    font-size: 12px;
  }

  .jop-hero-meta span {
    font-size: 12px;
  }

  .container.tf-single-layout {
    padding-left: 12px;
    padding-right: 12px;
  }
}