/* Boxpod - Landlord guide hub (/guides) and guide template (/guides/{slug}).
   Shared by guides.php and guide.php. Uses the site's CSS variables.

   MOBILE-FIRST: every rule below is written for phones by default; tablet and
   desktop refinements are layered on with min-width media queries
   (>=769px tablet/desktop, >=992px wide desktop, >=1600px large monitors).
   Roughly 80% of Boxpod traffic is mobile - design for that first. */

/* =========================================================
   Hero (dark, mirrors /about and /how-it-works)
   ========================================================= */
.guide-hero { position: relative; padding: 56px 0 48px; background: var(--dark); color: var(--white); overflow: hidden; }
.guide-hero .container { position: relative; z-index: 2; }
.guide-hero h1 { font-family: var(--font-primary); font-size: 34px; line-height: 112%; font-weight: var(--fw-500); color: var(--white); margin: 0 0 18px; letter-spacing: -0.02em; }
.guide-hero .guide-answer { font-family: var(--font-primary); font-size: 17px; line-height: 155%; color: rgba(255,255,255,0.88); margin: 0; }
.guide-hero .guide-meta { margin: 18px 0 0; font-size: 13px; color: rgba(255,255,255,0.55); }
.guide-hero .guide-cta-row { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.guide-hero .btn-primary { width: 100%; box-sizing: border-box; transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out; }

/* Hub hero image: the "Warehouse Light Shafts" advertiser shot (4K source from Jack,
   cut to 1600w / 2560w WebP - the 17 MB SVG wrapper is never served). On phones the
   subject peeks in at the right edge; on desktop he stands at ~78% across, clear of
   the copy, which is capped at 760px. A left-to-right scrim keeps text legible. */
.guide-hero--image {
    --guide-hero-img: url('/assets-v2/images/guides-hero-warehouse-1600.webp');
    --guide-hero-img-lg: url('/assets-v2/images/guides-hero-warehouse-2560.webp');
    --guide-hero-pos: 78% 45%;
    background-color: #1c1c1c;
    background-image:
        linear-gradient(to right, rgba(28,28,28,0.90) 0%, rgba(28,28,28,0.70) 42%, rgba(28,28,28,0.28) 68%, rgba(28,28,28,0.06) 100%),
        var(--guide-hero-img);
    background-size: cover;
    background-position: var(--guide-hero-pos);
    background-repeat: no-repeat;
}

/* CTA pair, matching the /list-your-property hero: orange primary with dark arrow
   square + animated shine border (global .btn-primary.has-shine.is-orange), and a
   ghost secondary with a right-pointing arrow that swings down on hover. */
.btn-primary.guide-cta-primary { padding: 16px 70px 16px 32px; font-size: 16px; line-height: 16px; min-height: 48px; box-sizing: border-box; outline-color: transparent !important; } /* 48px = standard site button height */
.guide-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; color: var(--white); text-decoration: none; font-family: var(--font-primary); font-weight: var(--fw-500); font-size: 16px; letter-spacing: 0.16px; padding: 15px 28px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.4); transition: background 0.2s, color 0.2s, border-color 0.2s; line-height: 16px; min-height: 48px; }
.guide-btn-ghost:hover, .guide-btn-ghost:focus { background: var(--white); color: var(--dark); border-color: var(--white); }
.guide-btn-ghost .ghost-arrow { width: 14px; height: 14px; flex-shrink: 0; transform: rotate(-90deg); transform-origin: center; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.guide-btn-ghost:hover .ghost-arrow, .guide-btn-ghost:focus .ghost-arrow { transform: rotate(-135deg); }

/* Breadcrumb */
.guide-breadcrumb { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.6); margin: 0 0 22px; font-family: var(--font-primary); }
.guide-breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--white); }
.guide-breadcrumb span { margin: 0 8px; opacity: 0.5; }

/* =========================================================
   Hub grid (one column on phones)
   ========================================================= */
.guides-grid-section { padding: 44px 0 56px; background: var(--white); }
.guides-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; }
.guide-card { background: var(--white); border: 1px solid var(--secondary); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform 0.15s linear, box-shadow 0.15s linear, border-color 0.15s linear; }
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,0.06); border-color: var(--primary); }
.guide-card-cat { font-family: var(--font-primary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--primary); font-weight: var(--fw-700); }
.guide-card-title { font-family: var(--font-primary); font-size: 18px; line-height: 130%; font-weight: var(--fw-500); color: var(--dark); margin: 0; }
.guide-card-blurb { font-size: 14px; line-height: 155%; color: #555; margin: 0; flex: 1; }
.guide-card-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: var(--fw-700); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; }

/* =========================================================
   Article body
   ========================================================= */
.guide-body { padding: 44px 0 16px; background: var(--white); }
.guide-prose { max-width: 820px; }
.guide-body h2 { font-family: var(--font-primary); font-size: 23px; line-height: 125%; font-weight: var(--fw-500); color: var(--dark); margin: 36px 0 12px; letter-spacing: -0.01em; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body p, .guide-body li { font-size: 16px; line-height: 165%; color: #333; }
.guide-body p { margin: 0 0 16px; }

/* Placeholder block - visible until the content pass, then unused */
.guide-draft { border: 1px dashed #c9ced6; background: #fafbfc; padding: 14px 16px; color: #6b7482; font-size: 14px; line-height: 155%; }
.guide-draft::before { content: "Draft"; display: inline-block; font-size: 11px; font-weight: var(--fw-700); letter-spacing: 0.6px; text-transform: uppercase; color: var(--primary); margin-right: 10px; }

/* =========================================================
   Comparison table (scrolls sideways inside its own box on phones)
   ========================================================= */
.guide-table-section { padding: 16px 0 32px; background: var(--white); }
.guide-table-wrap { max-width: 920px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guide-table-wrap caption { text-align: left; font-family: var(--font-primary); font-size: 18px; font-weight: var(--fw-500); color: var(--dark); padding: 0 0 12px; caption-side: top; }
.guide-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.guide-table th, .guide-table td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--secondary); vertical-align: top; line-height: 145%; }
.guide-table th { font-family: var(--font-primary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; font-weight: var(--fw-700); border-bottom: 2px solid var(--secondary); }
.guide-table td:first-child { font-weight: var(--fw-500); color: var(--dark); }
.guide-table td.is-boxpod { background: #fff4ec; }
.guide-table th.is-boxpod { color: var(--primary); }

/* Evidence callout */
.guide-evidence { max-width: 820px; margin: 8px 0 32px; padding: 20px 20px; border-left: 4px solid var(--primary); background: #fff4ec; font-family: var(--font-primary); font-size: 16px; line-height: 155%; color: var(--dark); }

/* Sign-off at the end of the article */
.guide-signoff { margin: 8px 0 40px; }
.guide-signoff p { font-size: 16px; line-height: 165%; color: #333; margin: 0 0 14px; }
.guide-signoff a { color: var(--primary); text-decoration: none; }
.guide-signoff a:hover { text-decoration: underline; }
.guide-signoff .guide-signoff-name { font-family: var(--font-primary); font-weight: var(--fw-700); color: var(--dark); margin: 0; }

/* =========================================================
   CTA band
   ========================================================= */
.guide-cta { padding: 52px 0; background: var(--dark); color: var(--white); }
.guide-cta h2 { font-family: var(--font-primary); font-size: 27px; line-height: 115%; font-weight: var(--fw-500); color: var(--white); margin: 0 0 12px; letter-spacing: -0.01em; }
.guide-cta p { color: rgba(255,255,255,0.78); font-size: 16px; margin: 0 0 22px; max-width: 640px; }
.guide-cta .guide-cta-row { display: flex; flex-direction: column; gap: 12px; }
.guide-cta .btn-primary { width: 100%; box-sizing: border-box; }

/* CTA band photo: same warehouse shot + scrim as the hub hero */
.guide-cta--image {
    background-color: #1c1c1c;
    background-image:
        linear-gradient(to right, rgba(28,28,28,0.92) 0%, rgba(28,28,28,0.78) 45%, rgba(28,28,28,0.35) 72%, rgba(28,28,28,0.10) 100%),
        url('/assets-v2/images/guides-hero-warehouse-1600.webp');
    background-size: cover;
    background-position: 78% 55%;
    background-repeat: no-repeat;
}

/* FAQ reuses .faq-section.landlord-faq from landlord-landing.css; the accordion
   animates height, so the answer must clip while it moves */
.faq-section.landlord-faq .faq-answer { overflow: hidden; }
.faq-section.landlord-faq .faq-answer p { margin: 0; }
.guide-faq-empty { max-width: 820px; margin: 32px auto 0; }

/* =========================================================
   Related guides
   ========================================================= */
.guide-related { padding: 44px 0 56px; background: var(--white); }
.guide-related h2 { font-family: var(--font-primary); font-size: 23px; font-weight: var(--fw-500); color: var(--dark); margin: 0 0 20px; letter-spacing: -0.01em; }
.guide-related .guides-grid { margin-top: 0; }

/* =========================================================
   Tablet and desktop (>= 769px)
   ========================================================= */
@media (min-width: 769px) {
    .guide-hero { padding: 90px 0 70px; }
        .guide-hero h1 { font-size: 48px; margin-bottom: 22px; max-width: 880px; }
    .guide-hero .guide-answer { font-size: 20px; max-width: 760px; }
    .guide-hero .guide-meta { margin-top: 22px; }
    .guide-hero .guide-cta-row { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 14px; margin-top: 30px; }
    .guide-hero .btn-primary { width: auto; }
    .guide-btn-ghost { width: auto; }
    .guide-breadcrumb { margin-bottom: 26px; }

    .guide-hero--image { --guide-hero-pos: center 45%; }
    .guide-cta--image { background-position: center 55%; }
    .guide-hero.guide-hero--image h1 { max-width: 760px; }
    .guide-hero.guide-hero--image .guide-answer { max-width: 680px; }

    .guides-grid-section { padding: 60px 0 80px; }
    .guides-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
    .guide-card { padding: 26px 24px; }
    .guide-card-title { font-size: 19px; }


    .guide-body { padding: 64px 0 24px; }
    .guide-body h2 { font-size: 28px; margin: 44px 0 14px; }
    .guide-body p, .guide-body li { font-size: 17px; }
    .guide-body p { margin-bottom: 18px; }
    .guide-draft { padding: 16px 18px; font-size: 15px; }

    .guide-table-section { padding: 20px 0 40px; }
    .guide-table-wrap caption { font-size: 20px; padding-bottom: 14px; }
    .guide-table { font-size: 15px; }
    .guide-table th, .guide-table td { padding: 13px 14px; }
    .guide-table th { font-size: 13px; }
    .guide-evidence { margin-bottom: 40px; padding: 24px 26px; font-size: 17px; }
    .guide-signoff p { font-size: 17px; }

    .guide-cta { padding: 70px 0; }
    .guide-cta h2 { font-size: 34px; }
    .guide-cta p { font-size: 17px; margin-bottom: 26px; }
    .guide-cta .guide-cta-row { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 14px; }
    .guide-cta .btn-primary { width: auto; }

    .guide-related { padding: 64px 0 80px; }
    .guide-related h2 { font-size: 28px; }
    .guide-related h2 { margin-bottom: 26px; }
}

/* Large monitors: sharper hero source */
@media (min-width: 1600px) {
    .guide-cta--image {
        background-image:
            linear-gradient(to right, rgba(28,28,28,0.92) 0%, rgba(28,28,28,0.78) 45%, rgba(28,28,28,0.35) 72%, rgba(28,28,28,0.10) 100%),
            url('/assets-v2/images/guides-hero-warehouse-2560.webp');
    }
    .guide-hero--image {
        background-image:
            linear-gradient(to right, rgba(28,28,28,0.90) 0%, rgba(28,28,28,0.70) 42%, rgba(28,28,28,0.28) 68%, rgba(28,28,28,0.06) 100%),
            var(--guide-hero-img-lg);
    }
}