/*
 * Manoj Yadav — Stitch Page Designs
 * Active only on the five design slugs (body.mya-design-page).
 * NOTE: contains no icon rules — the Material Symbols webfont loads from
 * the theme and renders untouched.
 */
body.mya-design-page { overflow-x: hidden; }
body.mya-design-page main > section:first-of-type { display: none !important; }
body.mya-design-page .mya-design-fullbleed {
	position: relative;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
}

/* remove the extra top space above the design (theme adds its own pt-20) */
body.mya-design-page main > section:nth-of-type(2) { padding-top: 0 !important; }
body.mya-design-page .mya-design-fullbleed > main { padding-top: 0 !important; margin-top: 0 !important; }
body.mya-design-page .mya-design-fullbleed section:first-of-type { padding-top: 0 !important; }

/* comparison table: force readable colours on the dark header bar */
.mya-compare-table thead tr { background-color: #251912 !important; }
.mya-compare-table thead th { color: #f2ede4 !important; }
.mya-compare-table thead th:first-child,
.mya-compare-table thead th:last-child { color: #e9cd94 !important; }
.mya-compare-table tbody td { color: #4e4540 !important; }
.mya-compare-table tbody td:first-child { color: #241811 !important; font-weight: 600 !important; }
.mya-compare-table tbody td:last-child { color: #332216 !important; }

/* ============================================================
   MOBILE FIX — article hero on design pages (<=767px)
   Problem: the hero keeps its desktop 16:9 frame, so on a phone the
   caption row + gradient sat on top of most of the photograph and the
   image was effectively hidden. Fix: taller frame + shorter gradient +
   stacked, smaller labels pinned to the bottom edge.
   ============================================================ */
@media (max-width: 767px) {
	/* taller frame -> the photo has real room and the overlay covers less */
	/* match the artwork's own 16:9 ratio so cover() cannot crop the baked-in banner */
	body.mya-design-page .aspect-\[16\/9\] { aspect-ratio: 16 / 9 !important; }

	/* shorter, softer gradient: dark only at the very bottom */
	body.mya-design-page .aspect-\[16\/9\] > .absolute.inset-0 {
		background-image: linear-gradient(to top,
			rgba(36,24,17,.85) 0,
			rgba(36,24,17,.45) 10%,
			rgba(36,24,17,0) 30%) !important;
	}

	/* overlay labels: stack them, keep them small and tight to the bottom */
	body.mya-design-page .aspect-\[16\/9\] > .absolute.bottom-3 {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: .35rem !important;
		left: .7rem !important;
		right: .7rem !important;
		bottom: .7rem !important;
	}
	body.mya-design-page .aspect-\[16\/9\] > .absolute.bottom-3 > span:first-child {
		font-size: 11px !important;
		line-height: 1.35 !important;
	}
	body.mya-design-page .aspect-\[16\/9\] > .absolute.bottom-3 > span:last-child {
		font-size: 9px !important;
		padding: .15rem .4rem !important;
	}
}

/* ============================================================
   Overlay containment (all widths, mobile-tuned)
   Guarantees no label inside the hero frame can be clipped at an
   edge, and that every overlay stays within the picture bounds.
   ============================================================ */
body.mya-design-page .aspect-\[16\/9\] > .absolute { max-width: 100%; }
body.mya-design-page .aspect-\[16\/9\] > .absolute > span { max-width: 100%; overflow-wrap: break-word; }

@media (max-width: 767px) {
	body.mya-design-page .aspect-\[16\/9\] > .absolute.left-4,
	body.mya-design-page .aspect-\[16\/9\] > .absolute.right-4 {
		left: .7rem !important;
		right: .7rem !important;
	}
}


/* ============================================================
   Hero artwork carries the page title BAKED INTO the JPEG
   (512x286 ≈ 16:9). It must never be cropped, so the whole
   image is always shown and centred inside its frame.
   ============================================================ */
body.mya-design-page .aspect-\[16\/9\] > .bg-cover {
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}


/* ---------- mobile hero: <img>-based heroes (NRI + the other design pages) ----------
   These use <img class="w-full h-[380px] object-cover"> on 1.79-1.84:1 artwork.
   A fixed 380px height with cover() crops ~50% of the width on a phone, cutting the
   baked-in title graphic at the left edge. Let the artwork keep its own ratio instead. */
@media (max-width: 767px) {
	body.mya-design-page .overflow-hidden.bg-primary-container > img {
		height: auto !important;
		max-height: none !important;
		object-fit: contain !important;
	}
}


/* ---------- NRI-style hero on mobile: stack the label UNDER the photo ----------
   This hero is <img class="w-full h-[380px] object-cover"> plus an absolutely
   positioned label box (.absolute.bottom-4) that is TALLER than the photo once
   the image keeps its own ratio — so the box was clipped at the top, cutting the
   first line ("...NRIs in the United"). Making it static flows it below the
   image: nothing clipped, and the artwork is fully visible. */
@media (max-width: 767px) {
	body.mya-design-page .overflow-hidden.bg-primary-container > .absolute.bottom-4 {
		position: static !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		margin: .5rem .25rem 0 !important;
	}
}


/* ============================================================
   Mobile text containment (design pages)
   Reported symptom: text in some boxes renders 1-2 words per line
   inside a narrow strip, with empty columns beside it.
   Covers: a multi-column grid still applying at phone width, a
   grid/flex child unable to shrink, and Android Chrome text
   autosizing inflating text inside narrow boxes.
   ============================================================ */
@media (max-width: 767px) {
	/* every grid on a design page stacks to one full-width column */
	body.mya-design-page .grid { grid-template-columns: minmax(0, 1fr) !important; }
	body.mya-design-page .grid > * { min-width: 0 !important; }

	/* prose wraps normally - never one or two words per line */
	body.mya-design-page p, body.mya-design-page li,
	body.mya-design-page h1, body.mya-design-page h2,
	body.mya-design-page h3, body.mya-design-page h4 {
		overflow-wrap: normal !important;
		word-break: normal !important;
		hyphens: none !important;
	}
	body.mya-design-page ul.list-disc { padding-left: 1.25rem !important; }
}

/* stop Android Chrome text autosizing from inflating text in narrow boxes */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* ============================================================
   Fixed-height hero containers on the design pages
   These pages use a hero that is a fixed pixel height on mobile
   (img h-[420px ...], or .bg-cover h-[340px]/h-[360px]) holding
   ~1.8:1 artwork. A fixed height makes the box portrait on a
   phone, so cover() scales the image up and crops the sides -
   slicing the baked-in title text off the left edge.
   Let the box take the artwork's own shape instead.
   ============================================================ */
@media (max-width: 767px) {
	/* <img> heroes that carry a fixed bracket height (never small thumbnails) */
	body.mya-design-page img[class*="object-cover"][class*="h-["] {
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 16 / 9 !important;
		object-fit: contain !important;
	}

	/* background-image heroes with a fixed bracket height */
	body.mya-design-page [class*="bg-cover"][class*="h-["] {
		height: auto !important;
		aspect-ratio: 16 / 9 !important;
		background-size: contain !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
	}
}

/* ============================================================
   HERO PHOTO ON NARROW SCREENS  (phone + tablet widths)

   The hero photo is ~1.835:1 and carries its banner text BAKED
   INTO the JPEG, so it must never be cropped. The frame around
   it has a FIXED pixel height, which on a phone makes the frame
   portrait and forces cover() to slice the sides off - taking
   the baked-in banner with it.

   Fix: draw the photo as a ratio-matched block at the TOP of the
   frame, and let the caption flow normally BENEATH it. The frame
   then grows with the caption, so at any width the photo cannot
   be cropped and the caption cannot be clipped.

   The photo URLs below are the fixed design assets these pages
   already use - if you ever rename them, update these two lines.
   ============================================================ */
@media (max-width: 1023px){

  /* ---------- landlord-tenant-advisory ---------- */
  body.postid-62 div[data-alt][class*="bg-cover"]{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background-image: none !important;
    background-color: #24180f !important;
  }
  body.postid-62 div[data-alt][class*="bg-cover"]::before{
    content: "";
    display: block;
    flex: none;
    width: 100%;
    aspect-ratio: 1.8351;
    background-image: url("/wp-content/plugins/manoj-yadav-designs/assets/img/pages/pg-2988985634.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* ---------- property-due-diligence ---------- */
  body.postid-60 div[data-alt][class*="bg-cover"]{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background-image: none !important;
    background-color: #24180f !important;
  }
  body.postid-60 div[data-alt][class*="bg-cover"]::before{
    content: "";
    display: block;
    flex: none;
    width: 100%;
    aspect-ratio: 1.8351;
    background-image: url("/wp-content/plugins/manoj-yadav-designs/assets/img/pages/pg-cb48b6a8af.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* ---------- both: overlay children (badge + caption) go into normal flow ---------- */
  body.postid-60 div[data-alt][class*="bg-cover"] > div[class*="absolute"],
  body.postid-62 div[data-alt][class*="bg-cover"] > div[class*="absolute"]{
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: .6rem .5rem 0 !important;
  }
  /* the dark scrim only existed to make text readable ON the photo */
  body.postid-60 div[data-alt][class*="bg-cover"] > div[class*="inset-0"],
  body.postid-62 div[data-alt][class*="bg-cover"] > div[class*="inset-0"]{ display: none !important; }

  /* NOTE: on THIS page the caption sits on the frame's own dark ink background
     (the frame is bg-ink), so the caption text keeps its designed light ivory
     colour. Do NOT recolour it dark - dark-on-dark makes it invisible and the
     frame then looks like a large empty box. */
  body.postid-60 div[data-alt][class*="bg-cover"] > div[class*="absolute"]{
    color: #fef9f0 !important;
  }
  body.postid-60 div[data-alt][class*="bg-cover"] > div[class*="absolute"] p{
    color: #fef9f0 !important;
  }
  /* the small brass badge keeps its own dark chip + brass text */
  body.postid-60 div[data-alt][class*="bg-cover"] > div[class*="absolute"][class*="bg-ink"],
  body.postid-60 div[data-alt][class*="bg-cover"] > div[class*="absolute"][class*="bg-ink"] *{ color: #e9cd94 !important; }
  /* tighten the stacked layout so the frame is no taller than its content needs */
  body.postid-60 div[data-alt][class*="bg-cover"]{ padding-bottom: .3rem !important; }
  body.postid-60 div[data-alt][class*="bg-cover"] > div[class*="absolute"]{ margin: .55rem .5rem 0 !important; }

  /* ---------- succession-estate-planning-hnis (already confirmed working) ---------- */
  body.postid-61 img[class*="object-cover"][class*="h-["]{
    width: 100% !important; height: auto !important; max-height: none !important;
    aspect-ratio: auto !important; object-fit: cover !important; object-position: center !important;
  }
  body.postid-61 .bg-surface-container.overflow-hidden > .absolute.inset-0{ display: none !important; }
  body.postid-61 .bg-surface-container.overflow-hidden > .absolute.bottom-0{
    position: static !important; inset: auto !important; left: auto !important; right: auto !important;
    bottom: auto !important; width: auto !important; margin: .5rem .3rem 0 !important;
    padding: .25rem .25rem .6rem !important; color: #24180f !important;
  }
  body.postid-61 .bg-surface-container.overflow-hidden > .absolute.bottom-0 span{ color: #8a5c1c !important; }
  body.postid-61 .bg-surface-container.overflow-hidden > .absolute.bottom-0 p{ color: #24180f !important; }
}