/**
 * The home plan sheet — a page section built out of core blocks.
 *
 * Everything here hangs off .obilis-sheet, so it can only reach the pattern's
 * own markup and never the rest of the page. The pattern uses core blocks and
 * nothing else, which is what makes every line of it editable; the styling all
 * arrives through class names the pattern sets.
 *
 * The same file is loaded into the block editor, so the layout in wp-admin is
 * the layout on the page.
 *
 * The sheet is drawn as the printed brochure: a dark brand rail down the side
 * of the photograph, the model's name and code across the top of it, the price
 * on a tab over its corner, then the specification beside the promise, the
 * floor plans beside the highlights, and the contact bar last.
 *
 * The layout is grid over plain markup rather than nested columns blocks. That
 * is what lets the sheet survive being edited: a columns block keeps its widths
 * in the post content, so the first person to drag a block breaks the design
 * permanently and nobody can put it back. Here the design lives in this file
 * and the content lives in the post, and neither can damage the other.
 *
 * @package obilis-homes
 */

.obilis-sheet {
  --sheet-dark: #22301f;
  --sheet-deep: #16210f;
  --sheet-gold: #c9a24a;
  --sheet-cream: #f7f4ec;
  --sheet-line: #e2ddd0;
  --sheet-ink: #23302a;
  --sheet-muted: #6d7a70;
  --sheet-rail: 232px;

  max-width: 1080px;
  margin-inline: auto;
  /* The sheet's bands fold on the sheet's own width, not the window's. Those
     two are not the same number anywhere that matters: the editor canvas is
     far narrower than the window around it, and the sheet can be dropped into
     a column on a page. Asking the container is the only way the layout is
     right in both places without a second set of rules for the editor. */
  container-type: inline-size;
  container-name: obilis-sheet;
  font-family: var(--sans, sans-serif);
  color: var(--sheet-ink);
  background: var(--sheet-cream);
  border: 1px solid var(--sheet-line);
  border-radius: 6px;
  overflow: hidden;
}

/* The sheet is a stack of bands that meet edge to edge, so the space between
   them is each band's own padding. Any margin would show as a seam of page
   colour across a design that has none. */
.obilis-sheet > *,
.obilis-sheet [class*="obilis-"] > * { margin-block: 0; }

/* --- When the group is set to Wide or Full width -------------------------
   The editor writes .alignwide (or .alignfull) on the group, and the theme
   breaks those blocks out of a narrow column the usual way: margin-left: 50%
   and translateX(-50%), which lands the block's centre on the column's centre
   whatever its width.

   The sheet, though, carries its own max-width and centres itself with auto
   margins — and auto margins win over the 50% one, while the transform stays.
   So it was centred once by the margins and then shoved half its own width to
   the left by a transform with nothing left to cancel. It takes the width
   those classes ask for; the moving it does itself. */
.obilis-sheet.alignwide,
.obilis-sheet.alignfull,
.obilis-clean.alignwide,
.obilis-clean.alignfull {
  margin-inline: auto;
  transform: none;
}

/* ==========================================================================
   1. The masthead — rail, photograph, name, code, price
   ========================================================================== */

.obilis-sheet-top {
  display: grid;
  grid-template-columns: var(--sheet-rail) minmax(0, 1fr);
  background: #fff;
}

.obilis-sheet-rail {
  position: relative;
  z-index: 2;
  /* The rail is as tall as what it says, not as tall as the photograph beside
     it: stretched to the row it left a long empty green column under the last
     line, which is the one thing on the sheet that read as unfinished. */
  align-self: start;
  padding: 30px 26px 34px;
  background: linear-gradient(170deg, #2a3a26 0%, var(--sheet-deep) 100%);
  color: #e9ede6;
}

.obilis-rail-logo { margin: 0 0 14px; }
.obilis-rail-logo img { width: 82px; height: auto; }

.obilis-rail-brand {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: .16em;
  color: #fff;
  margin-bottom: 26px;
}
.obilis-rail-brand strong {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .42em;
  color: var(--sheet-gold);
  margin-top: 6px;
}

.obilis-rail-kicker {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.9;
  color: #cdd6cb;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin-bottom: 26px;
}

/* The one line on the sheet set in italic: it is a signature rather than copy,
   and the only thing inside the rail the eye should stop on. */
.obilis-rail-script {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.45;
  color: #fff;
  margin-bottom: 18px;
}

.obilis-rail-note {
  font-size: .78rem;
  line-height: 1.85;
  color: #b9c4b7;
}

.obilis-sheet-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding-top: 30px;
  min-width: 0;
}

.obilis-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 0 26px 16px 30px;
}

.obilis-sheet-title { min-width: 0; }

.obilis-sheet-name {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 600;
  line-height: .95;
  color: var(--sheet-dark);
}
.obilis-sheet-thai {
  margin-top: 6px !important;
  font-size: 1.15rem;
  color: var(--sheet-muted);
}

.obilis-sheet-meta { flex: none; text-align: right; }

/* The model code is a label on a technical drawing, so it is boxed like one. */
.obilis-sheet-code {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--sheet-dark);
  border-radius: 3px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--sheet-dark);
}
.obilis-sheet-type {
  margin-top: 10px !important;
  font-size: .8rem;
  color: var(--sheet-muted);
}

/* The picture is the ground the masthead stands on rather than a panel beside
   the rail: it runs the full width of the sheet, out under the rail and down to
   the foot of the band, and the rail and the price tab ride over it. Widened
   with a negative margin rather than moved in the grid, so the head above it
   keeps its own white row and the model's name is never set over a photograph.
   z-index puts the two dark blocks above it; without that the picture would be
   painted last and cover them. */
.obilis-sheet-photo {
  position: relative;
  z-index: 0;
  align-self: stretch;
  margin-left: calc(var(--sheet-rail) * -1);
  width: calc(100% + var(--sheet-rail));
}
.obilis-sheet-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* Rides over the bottom-right corner of the picture, as on the printed sheet. */
.obilis-sheet-price {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  min-width: 210px;
  padding: 16px 30px 20px;
  text-align: center;
  background: linear-gradient(160deg, #2a3a26, var(--sheet-deep));
  color: #fff;
}
.obilis-price-label {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: #b9c4b7;
}
.obilis-price-value {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  margin-top: 2px !important;
}
.obilis-price-unit {
  font-size: .78rem;
  color: #cdd6cb;
}

/* --- What wp-admin does to the price tab ---------------------------------
   The tab rides over the corner of the picture because it is positioned
   absolutely. The block editor puts `position: relative` on every block it
   draws — that is how it hangs a toolbar on each one — and that overrides it,
   dropping the tab back into the flow where, being a block, it stretches the
   full width of the sheet as a long empty dark band.

   The class in the selector exists only in the editor, so this touches nothing
   on the page: there the tab is given its own width again and sent to the
   right, which is where the page shows it. */
.obilis-sheet-price.block-editor-block-list__block {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
}

/* ==========================================================================
   2. Facts — the specification beside the promise
   ========================================================================== */

.obilis-sheet-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  padding: 34px 0 38px;
}

.obilis-sheet-specs-wrap { padding: 0 34px 0 30px; }

.obilis-band-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--sheet-dark);
  margin-bottom: 22px !important;
}

.obilis-sheet-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 30px;
}

/* Icon, label, figure — a specification reads as a table even when it is not
   marked up as one, and the figure is what the eye is scanning down. */
.obilis-spec {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sheet-line);
}
.obilis-spec-label { font-size: .88rem; }
.obilis-spec-value { font-size: .88rem; font-weight: 600; color: var(--sheet-dark); white-space: nowrap; }

/* Auto-linking can turn a room name into a link; inside a spec sheet that
   reads as a mistake rather than as a route somewhere. */
.obilis-sheet-specs a { color: inherit; text-decoration: none; }

.obilis-sheet-custom {
  padding: 0 30px 0 34px;
  border-left: 1px solid var(--sheet-line);
}

.obilis-custom-kicker {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--sheet-dark);
  margin-bottom: 12px !important;
}
.obilis-custom-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--sheet-dark);
  margin-bottom: 10px !important;
}
.obilis-custom-text {
  font-size: .84rem;
  line-height: 1.85;
  color: var(--sheet-muted);
  margin-bottom: 22px !important;
}

.obilis-sheet-promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Icon over the words rather than beside them: that is what separates a row of
   assurances from the list of measurements opposite it. */
.obilis-promise {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: .66rem;
  line-height: 1.5;
  color: var(--sheet-muted);
}

/* ==========================================================================
   3. Floor plans, and what is good about this house
   ========================================================================== */

.obilis-sheet-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .68fr);
  gap: 26px;
  padding: 0 30px 36px;
}

/* A tab rather than a heading: it names the drawing beneath it the way the
   label on a printed plan does. */
.obilis-plan-title {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 3px;
  background: var(--sheet-dark);
  color: #fff;
  font-family: var(--sans, sans-serif);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 12px !important;
}

.obilis-plan-image img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--sheet-line);
  border-radius: 4px;
}

.obilis-sheet-points {
  align-self: start;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--sheet-line);
  border-radius: 6px;
}

.obilis-points-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sheet-dark);
  margin-bottom: 18px !important;
}

.obilis-point {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sheet-line);
}
/* Three items into two columns: without saying where each one goes, the icon
   takes the first cell, the heading the second, and the paragraph wraps onto a
   second row back in the 34px icon column — where Thai breaks to one word a
   line. The icon holds the first column and the words share the second. */
.obilis-point::before { grid-column: 1; grid-row: 1; }
.obilis-point > h4,
.obilis-point > p { grid-column: 2; }

.obilis-point:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.obilis-point h4 {
  font-family: var(--sans, sans-serif);
  font-size: .86rem;
  font-weight: 700;
  color: var(--sheet-dark);
  margin-bottom: 3px !important;
}
.obilis-point p { font-size: .72rem; line-height: 1.65; color: var(--sheet-muted); }

/* ==========================================================================
   4. The contact bar
   ========================================================================== */

.obilis-sheet-foot {
  display: grid;
  grid-template-columns: var(--sheet-rail) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 30px;
  background: linear-gradient(100deg, var(--sheet-deep), #2a3a26);
  color: #cdd6cb;
}

.obilis-foot-brand {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.25rem;
  letter-spacing: .16em;
  line-height: 1.1;
  color: #fff;
}
.obilis-foot-brand strong {
  display: block;
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .38em;
  color: var(--sheet-gold);
  margin-top: 4px;
}

.obilis-foot-line { font-size: .78rem; line-height: 1.8; }

.obilis-foot-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: .78rem;
  color: #e9ede6;
}
.obilis-foot-contact span { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   5. The ask
   ========================================================================== */

.obilis-sheet-cta {
  padding: 30px;
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--sheet-line);
}
.obilis-sheet-cta h3 {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.3rem;
  color: var(--sheet-dark);
  margin-bottom: 6px !important;
}
.obilis-sheet-cta p {
  font-size: .85rem;
  color: var(--sheet-muted);
  margin-bottom: 18px !important;
}

/* ==========================================================================
   6. Icons
   ==========================================================================

   Painted from a mask on the ico-* class rather than marked up, for the same
   reason the layout is not built from columns blocks: there is no SVG in the
   editor for anyone to delete by accident, and re-iconing a duplicated row is
   one class name. The colour is the element's own, so an icon inside the dark
   footer needs no separate artwork. */

.obilis-spec::before,
.obilis-point::before,
.obilis-promise::before,
.obilis-foot-contact span::before {
  content: "";
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}

.obilis-spec::before { width: 24px; height: 24px; color: var(--sheet-dark); }
.obilis-point::before { width: 30px; height: 30px; color: var(--sheet-dark); opacity: .85; }
.obilis-promise::before { width: 30px; height: 30px; color: var(--sheet-dark); }
.obilis-foot-contact span::before { width: 15px; height: 15px; color: var(--sheet-gold); }

/* Single-quoted inside so nothing in the SVG needs escaping, and stroked rather
   than filled so each one keeps its weight at any size. */
.obilis-sheet .ico-bed     { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 18v-7h18v7'/><path d='M3 18v2M21 18v2'/><path d='M6 11V8h5v3M13 11V8h5v3'/></svg>"); }
.obilis-sheet .ico-bath    { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h18v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/><path d='M6 12V6a2 2 0 0 1 4 0'/><path d='M6 19v2M18 19v2'/></svg>"); }
.obilis-sheet .ico-sofa    { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13V9a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4'/><path d='M2 13h20v5H2z'/><path d='M5 18v2M19 18v2'/></svg>"); }
.obilis-sheet .ico-stairs  { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20h4v-4h4v-4h4V8h5'/><path d='M3 20V4'/></svg>"); }
.obilis-sheet .ico-kitchen { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><path d='M4 10h16'/><circle cx='8' cy='6.5' r='1'/><circle cx='12' cy='6.5' r='1'/><path d='M8 14v3'/></svg>"); }
.obilis-sheet .ico-area    { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='17' height='17' rx='1.5'/><path d='M8 3.5v17M3.5 8h17'/></svg>"); }
.obilis-sheet .ico-car     { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 16v2M19 16v2'/><path d='M3 16v-4l2-5h14l2 5v4z'/><path d='M5.5 12h13'/></svg>"); }
.obilis-sheet .ico-size    { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 4l9 6.5'/><path d='M5.5 9.5V20h13V9.5'/><path d='M10 20v-5h4v5'/></svg>"); }
.obilis-sheet .ico-land    { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 21 9v12H3V9z'/><path d='M3 9h18'/><path d='M8 21v-6h8v6'/></svg>"); }

.obilis-sheet .ico-pencil  { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 5.5 18.5 9.5 9 19H5v-4z'/><path d='m13 7 4 4'/></svg>"); }
.obilis-sheet .ico-tools   { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20 20 4'/><path d='M4 4l6 6'/><path d='M20 20l-6-6'/></svg>"); }
.obilis-sheet .ico-shield  { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 20 6v6c0 4.5-3.2 7.8-8 9-4.8-1.2-8-4.5-8-9V6z'/><path d='m9 12 2 2 4-4'/></svg>"); }
.obilis-sheet .ico-support { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14v-2a8 8 0 0 1 16 0v2'/><path d='M4 14h3v5H5.5A1.5 1.5 0 0 1 4 17.5zM20 14h-3v5h1.5a1.5 1.5 0 0 0 1.5-1.5z'/></svg>"); }

.obilis-sheet .ico-house   { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 4l9 6.5'/><path d='M5.5 9.5V20h13V9.5'/></svg>"); }
.obilis-sheet .ico-window  { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='1.5'/><path d='M12 4v16M4 12h16'/></svg>"); }
.obilis-sheet .ico-globe   { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/></svg>"); }
.obilis-sheet .ico-line    { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11c0 4-4 7-9 7-1 0-2-.1-2.9-.4L4 20l1.2-3.3C3.8 15.4 3 13.3 3 11c0-4 4-7 9-7s9 3 9 7z'/></svg>"); }
.obilis-sheet .ico-phone   { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h3l2 5-2.5 1.5a12 12 0 0 0 5 5L15 12l5 2v3a2 2 0 0 1-2 2A15 15 0 0 1 4 5a2 2 0 0 1 2-2z'/></svg>"); }

/* ==========================================================================
   7. Narrow screens
   ==========================================================================

   The rail, the two-up specification and the three-up plans are all furniture
   for a sheet of A4. On a handset each falls to one column and the rail moves
   from the side of the picture to a band above it. */

/* Three columns need more room than the rest of the sheet does. Below this the
   highlights would be squeezed to about 130px of text — narrow enough that Thai
   breaks to one word a line — so the panel drops under the two plans and lays
   its points out in a row instead, which is the same information in a shape
   that fits. */
@container obilis-sheet (max-width: 1000px) {
  .obilis-sheet-plans { grid-template-columns: 1fr 1fr; }
  .obilis-sheet-points { grid-column: 1 / -1; }
}

@container obilis-sheet (max-width: 1000px) and (min-width: 561px) {
  .obilis-sheet-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
  }
  .obilis-points-title { grid-column: 1 / -1; }
  /* The last row's pair should not keep a rule that now has nothing under it. */
  .obilis-point:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
}

@container obilis-sheet (max-width: 820px) {
  .obilis-sheet { --sheet-rail: 1fr; }

  .obilis-sheet-top { grid-template-columns: 1fr; }
  /* One column: there is no rail beside the picture to reach out under. */
  .obilis-sheet-photo { margin-left: 0; width: 100%; }
  .obilis-sheet-rail { padding: 24px 22px 26px; }
  .obilis-sheet-facts { grid-template-columns: 1fr; gap: 30px; }
  .obilis-sheet-specs-wrap,
  .obilis-sheet-custom { padding: 0 22px; }
  .obilis-sheet-custom { border-left: 0; }
  .obilis-sheet-plans { padding-inline: 22px; }
  .obilis-sheet-foot { grid-template-columns: 1fr; gap: 16px; padding-inline: 22px; }
}

@container obilis-sheet (max-width: 560px) {
  .obilis-sheet-head { flex-direction: column; gap: 14px; padding-inline: 22px; }
  .obilis-sheet-meta { text-align: left; }
  .obilis-sheet-specs { grid-template-columns: 1fr; }
  .obilis-sheet-plans { grid-template-columns: 1fr; }
  .obilis-sheet-points { display: block; }
  .obilis-sheet-promises { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }

  /* No room left over the corner of the picture, so it becomes a band under it. */
  .obilis-sheet-price {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 22px;
  }
  .obilis-price-value { font-size: 2.1rem; }
}

/* --- The spacing slider, on phones only ----------------------------------
   Customize → Design → "ช่องไฟในชีตแบบบ้าน (มือถือ)" writes --sheet-gap as a
   plain ratio, and every gap the sheet opens once it is a single column is
   multiplied by it. Each value repeats the number the rule above it uses, so
   at 100% — where the property is never written at all and the fallback of 1
   applies — this block changes nothing.

   Last in the file on purpose: same specificity as the rules it re-states, so
   it wins by order, and the two blocks above stay readable as the design.
   Only inside the container query, because the two-column sheet on a desktop
   has its own rhythm and a phone's taste has no business changing it. */
@container obilis-sheet (max-width: 820px) {
  .obilis-sheet-facts {
    gap: calc(30px * var(--sheet-gap, 1));
    padding-block: calc(34px * var(--sheet-gap, 1)) calc(38px * var(--sheet-gap, 1));
  }
  .obilis-band-title { margin-bottom: calc(22px * var(--sheet-gap, 1)) !important; }

  .obilis-sheet-specs { gap: calc(16px * var(--sheet-gap, 1)) 30px; }
  .obilis-spec { padding-bottom: calc(14px * var(--sheet-gap, 1)); }

  .obilis-sheet-plans {
    gap: calc(26px * var(--sheet-gap, 1));
    padding-bottom: calc(36px * var(--sheet-gap, 1));
  }

  .obilis-sheet-points { padding-block: calc(24px * var(--sheet-gap, 1)); }
  .obilis-point {
    padding-bottom: calc(16px * var(--sheet-gap, 1));
    margin-bottom: calc(16px * var(--sheet-gap, 1));
  }
  .obilis-sheet-promises { gap: calc(18px * var(--sheet-gap, 1)) 10px; }

  .obilis-sheet-foot {
    gap: calc(16px * var(--sheet-gap, 1));
    padding-block: calc(24px * var(--sheet-gap, 1));
  }
  .obilis-sheet-cta { padding-block: calc(30px * var(--sheet-gap, 1)); }
}


/* ==========================================================================
   The clean sheet — patterns/home-clean-sheet.php
   ==========================================================================

   The other pattern is a specification: a grid of numbers a buyer compares
   against another builder's. This one is a brochure — one photograph at full
   width, a sentence set large enough to be read from across a desk, and the
   numbers held back until the end.

   It shares the stylesheet but not a single rule with the sheet above: the two
   look nothing alike on purpose, and a rule written for one would only ever be
   a compromise for the other.
   ========================================================================== */

.obilis-clean {
  font-family: var(--sans, sans-serif);
  color: var(--ink, #18312b);
}

/* Wide, even spacing is most of what reads as "clean" here. The bands are far
   enough apart that they never need a rule between them. */
.obilis-clean > * + * { margin-top: 30px; }
.obilis-clean > .obilis-clean-pill { margin-top: 64px; }
.obilis-clean > .obilis-clean-gallery,
.obilis-clean > .obilis-clean-stats,
.obilis-clean > .obilis-clean-planrow { margin-top: 44px; }

/* --- The photograph, and the name across it ----------------------------- */

.obilis-clean-hero {
  border-radius: 22px;
  overflow: hidden;
  align-items: center;
}

/* Sized off the viewport so the name always spans the picture, whatever the
   model is called: a six-letter name and a twelve-letter one both land as one
   line at 11vw. Uppercase because these names are set as marks, not words. */
/* The element and the wrapper are both in the selector on purpose: style.css
   sizes Thai headings through `html[lang^="th"] h2`, which out-weighs a lone
   class and would otherwise hold this line at the page's ordinary h2 size. */
.obilis-clean h2.obilis-clean-title {
  font-family: var(--sans, sans-serif) !important;
  font-size: clamp(2.6rem, 11vw, 8rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .95;
  text-transform: uppercase;
  text-align: center;
  color: #fff !important;
  margin: 0 !important;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .25);
}

/* --- Section labels ------------------------------------------------------ */

.obilis-clean p.obilis-clean-pill {
  display: inline-block;
  padding: 7px 17px;
  border: 1px solid var(--line, #e4e9e5);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #6b7873);
  margin-bottom: 0;
}

/* --- The opening statement ----------------------------------------------
   Two tones in one sentence: the phrases that carry the meaning at full
   strength, the ones that join them dropped back. It is the whole reason this
   layout reads as designed rather than typed. */

.obilis-clean p.obilis-clean-lede {
  font-size: clamp(1.2rem, 2.3vw, 1.95rem);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.01em;
  max-width: 34ch;
  margin-left: 0 !important;   /* see the note on obilis-sheet-intro above */
  margin-right: auto !important;
}
.obilis-clean-lede .is-dim { color: #a2aba7; font-weight: 500; }
.obilis-clean-lede strong  { color: var(--gold-dark, #ab8636); font-weight: 700; }

@media (min-width: 900px) {
  .obilis-clean p.obilis-clean-lede { max-width: 48ch; }
}

.obilis-clean p.obilis-clean-note {
  font-size: .98rem;
  line-height: 1.8;
  color: var(--muted, #6b7873);
  max-width: 52ch;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* --- The pill button with its own arrow --------------------------------- */

.obilis-clean .obilis-clean-actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 22px;
  background: transparent;
  color: var(--ink, #18312b);
  border: 1px solid var(--line, #e4e9e5);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color .2s ease, color .2s ease;
}
.obilis-clean .obilis-clean-actions .wp-block-button__link::after {
  content: "↗";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--forest, #1b3a2a);
  color: #fff;
  font-size: .9rem;
}
.obilis-clean .obilis-clean-actions .wp-block-button__link:hover {
  border-color: var(--forest, #1b3a2a);
  color: var(--forest, #1b3a2a);
}

/* --- Rooms ---------------------------------------------------------------
   The gallery is core's; all it needs is the same corner radius as the hero so
   the two read as one family. */

.obilis-clean-gallery img { border-radius: 16px; }

/* Name and area on one line, the description under both — a museum label. */
.obilis-clean-caption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding-top: 4px;
  border-top: 1px solid var(--line, #e4e9e5);
}
.obilis-clean p.obilis-caption-name { font-weight: 600; margin: 10px 0 0; }
.obilis-clean p.obilis-caption-area { color: var(--muted, #6b7873); margin: 10px 0 0; text-align: right; }
.obilis-clean p.obilis-caption-note {
  grid-column: 1 / -1;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted, #6b7873);
  max-width: 60ch;
  margin: 2px 0 0;
}

/* --- The big line -------------------------------------------------------- */

.obilis-clean h2.obilis-clean-h2 {
  font-family: var(--sans, sans-serif);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--ink, #18312b);
  margin: 14px 0 0;
}
.obilis-clean-h2 strong { color: var(--gold-dark, #ab8636); font-weight: 800; }

/* --- The plan ------------------------------------------------------------
   A drawing needs a white ground and room to breathe around it; the card is
   what gives it both without the page having to be white itself. */

.obilis-clean-plan img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--line, #e4e9e5);
  border-radius: 18px;
  padding: 22px;
}

.obilis-clean-planrow { align-items: center; }

/* --- The numbers, last --------------------------------------------------- */

.obilis-clean-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--line, #e4e9e5);
}
.obilis-clean p.obilis-stat-num {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0;
}
.obilis-clean p.obilis-stat-lab {
  font-size: .78rem;
  color: var(--muted, #6b7873);
  margin: 6px 0 0;
}

@media (max-width: 782px) {
  .obilis-clean > .obilis-clean-pill { margin-top: 46px; }
  .obilis-clean-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .obilis-clean-hero { border-radius: 16px; }
}

/* --- The Download plan button --------------------------------------------
   Appended after the sheet by obilis_sheet_download_button(), so it sits
   outside the frame html2canvas paints and never appears in the PDF itself.
   Hidden from print for the same reason: whoever prints the page is already
   holding the sheet. */
.sheet-download {
  margin: 26px 0 0;
  text-align: center;
}
.sheet-download .btn { min-width: 240px; justify-content: center; }
.sheet-download .btn:disabled { opacity: .7; cursor: progress; }

/* --- Printing the sheet, and the PDF that comes out of it -----------------
   The Download button prints; the browser's own "Save as PDF" is the download.
   The whole page is on screen, so printing it has three jobs: put the sheet on
   the paper by itself, lay it out at the width of the paper rather than the
   window's, and bring it down onto one page — --sheet-fit is measured by
   plan-pdf.js and written on the sheet just before the dialog opens.

   Visibility rather than display for the rest of the page: an ancestor set to
   display:none takes the sheet inside it down too, while a hidden one leaves
   the box the sheet is positioned against exactly where it was. */
@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  .sheet-download { display: none !important; }

  body.is-printing-sheet {
    background: #fff;
    height: 297mm;
    overflow: hidden;
  }
  body.is-printing-sheet * { visibility: hidden !important; }

  body.is-printing-sheet .obilis-sheet,
  body.is-printing-sheet .obilis-sheet *,
  body.is-printing-sheet .obilis-clean,
  body.is-printing-sheet .obilis-clean *,
  body.is-printing-sheet .obilis-detail,
  body.is-printing-sheet .obilis-detail * { visibility: visible !important; }

  body.is-printing-sheet .obilis-sheet,
  body.is-printing-sheet .obilis-clean,
  body.is-printing-sheet .obilis-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--sheet-print-width, 1080px);
    max-width: none;
    margin: 0;
    /* Translate first, then scale: with the origin at the top left corner the
       offset stays in paper pixels rather than being scaled with the sheet. */
    transform: translateX(var(--sheet-left, 0px)) scale(var(--sheet-fit, 1));
    transform-origin: top left;
  }
}


/* ==========================================================================
   The detail page — patterns/home-detail-page.php
   ==========================================================================

   The third layout for a model, and the one that reads as a web page rather
   than as printed paper. The brochure sheet holds everything inside a framed
   card; this one lets the photograph run the full width, sets the name under it
   at the size of a title, and turns the specification into a quiet table with
   the price hoisted out beside it as a single large number.

   It shares the sheet's palette and its rules — core blocks, design in the
   class names, container queries so it folds on its own width rather than the
   window's — but nothing else. A model with one strong photograph and a story
   to tell belongs here; a model that is mostly numbers belongs on the sheet. */

.obilis-detail {
  --detail-ink: #23302a;
  --detail-dark: #22301f;
  --detail-muted: #6d7a70;
  --detail-line: #e2ddd0;
  --detail-gold: #c9a24a;
  --detail-cream: #f7f4ec;

  max-width: 1080px;
  margin-inline: auto;
  container-type: inline-size;
  container-name: obilis-detail;
  font-family: var(--sans, sans-serif);
  color: var(--detail-ink);
  background: #fff;
}

/* Same reason as the sheet: the bands meet edge to edge and each one carries
   its own padding, so a margin anywhere would show as a seam. */
.obilis-detail > *,
.obilis-detail [class*="obilis-detail-"] > * { margin-block: 0; }

.obilis-detail.alignwide,
.obilis-detail.alignfull { margin-inline: auto; transform: none; }

/* --- The photograph ------------------------------------------------------ */

.obilis-detail-hero img {
  display: block;
  width: 100%;
  height: clamp(300px, 46cqw, 560px);
  object-fit: cover;
  border-radius: 4px;
}

/* --- Name, tags, opening paragraph --------------------------------------- */

.obilis-detail-head { padding: 34px 0 30px; }

.obilis-detail-name {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(2.2rem, 5cqw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--detail-dark);
}

/* The English name is a second voice on the same line rather than a second
   line: smaller, lighter, and separated by a rule instead of a slash. */
.obilis-detail-latin {
  display: inline-block;
  margin-left: 14px;
  padding-left: 16px;
  border-left: 1px solid var(--detail-line);
  font-size: .46em;
  letter-spacing: .1em;
  color: var(--detail-muted);
  vertical-align: middle;
}

.obilis-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px !important;
}
.obilis-detail-tag {
  padding: 6px 14px;
  border: 1px solid var(--detail-line);
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--detail-muted);
  background: var(--detail-cream);
}

.obilis-detail-lead {
  max-width: 68ch;
  margin-top: 22px !important;
  font-size: 1rem;
  line-height: 1.95;
  color: #3d4a44;
}

/* --- The band that carries the numbers ----------------------------------- */

.obilis-detail-facts {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, .8fr);
  gap: 40px;
  padding: 34px 0 40px;
  border-top: 1px solid var(--detail-line);
  border-bottom: 1px solid var(--detail-line);
}

.obilis-detail-actions { display: grid; align-content: start; gap: 12px; }

/* Two cards rather than two buttons: what they hand over is a document, and a
   document reads as a thing to pick up rather than an action to take. */
.obilis-detail-card { margin: 0; }
.obilis-detail-card a {
  display: block;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--detail-dark);
  color: #fff;
  font-size: .78rem;
  line-height: 1.6;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.obilis-detail-card a strong {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.obilis-detail-card a:hover { background: #16210f; transform: translateY(-1px); }
.obilis-detail-card.is-quiet a {
  background: var(--detail-cream);
  color: var(--detail-dark);
  border: 1px solid var(--detail-line);
}
.obilis-detail-card.is-quiet a:hover { background: #efe8da; }

.obilis-detail-band-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--detail-dark);
  margin-bottom: 18px !important;
}

/* The specification as a list of lines rather than a grid of tiles: a buyer
   reads it top to bottom, and the dotted rule carries the eye from the name of
   the number to the number itself. */
.obilis-detail-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 34px;
}
.obilis-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  font-size: .9rem;
  color: var(--detail-muted);
  border-bottom: 1px dotted var(--detail-line);
}
.obilis-detail-row b {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--detail-dark);
  white-space: nowrap;
}
.obilis-detail-row span { font-size: .78rem; min-width: 3.4em; }

/* --- The price ------------------------------------------------------------ */

.obilis-detail-price { text-align: right; align-self: start; }
.obilis-detail-price-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--detail-muted);
}
.obilis-detail-price-value {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(2.8rem, 6cqw, 4.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--detail-dark);
  margin-top: 6px !important;
}
.obilis-detail-price-unit {
  font-size: 1rem;
  color: var(--detail-gold);
  margin-top: 2px !important;
}
.obilis-detail-price-note {
  margin-top: 14px !important;
  font-size: .72rem;
  line-height: 1.8;
  color: var(--detail-muted);
}

/* --- Plans and photographs ------------------------------------------------ */

.obilis-detail-plans { padding: 40px 0 10px; }
.obilis-detail-plan {
  margin-bottom: 34px !important;
  padding: 26px;
  background: var(--detail-cream);
  border: 1px solid var(--detail-line);
  border-radius: 6px;
}
.obilis-detail-plan img { display: block; width: 100%; height: auto; }

.obilis-detail-gallery { padding: 20px 0 44px; }
.obilis-detail-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.obilis-detail-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}

/* --- The ask -------------------------------------------------------------- */

.obilis-detail-cta {
  padding: 40px 30px 44px;
  text-align: center;
  background: var(--detail-cream);
  border-radius: 6px;
}
.obilis-detail-cta-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--detail-dark);
}
.obilis-detail-cta-text {
  max-width: 52ch;
  margin: 10px auto 0 !important;
  font-size: .92rem;
  line-height: 1.9;
  color: var(--detail-muted);
}
.obilis-detail-cta-button { margin-top: 22px !important; }
.obilis-detail-cta-button a {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  background: var(--detail-dark);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.obilis-detail-cta-button a:hover { background: #16210f; }

/* --- Folding, on the page's own width ------------------------------------- */

@container obilis-detail (max-width: 860px) {
  .obilis-detail-facts {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 26px 30px;
  }
  /* The price rides up beside the heading, and the cards go to the foot of the
     band where they read as what to do next rather than as a sidebar. */
  .obilis-detail-specs { grid-column: 1; grid-row: 1; }
  .obilis-detail-price { grid-column: 2; grid-row: 1; }
  .obilis-detail-actions { grid-column: 1 / -1; grid-auto-flow: column; }
}

@container obilis-detail (max-width: 620px) {
  .obilis-detail-hero img { height: clamp(220px, 64cqw, 360px); }
  .obilis-detail-name { font-size: clamp(1.9rem, 9cqw, 2.6rem); }
  .obilis-detail-latin {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    border-left: 0;
    font-size: .34em;
  }
  .obilis-detail-facts { grid-template-columns: 1fr; }
  .obilis-detail-price { grid-column: 1; grid-row: 2; text-align: left; }
  .obilis-detail-actions { grid-auto-flow: row; }
  .obilis-detail-rows { grid-template-columns: 1fr; }
  .obilis-detail-shots { grid-template-columns: 1fr 1fr; }
  .obilis-detail-plan { padding: 14px; }
  .obilis-detail-cta { padding: 32px 20px 34px; }
}

/* ==========================================================================
   Printing to the ADMIRE reference
   ==========================================================================

   The sheet on screen carries more than the printed reference does: a passage
   about custom work, a row of four promises, a panel of selling points and a
   closing call to action. On screen they earn their place. On paper they are
   what forces plan-pdf.js to scale everything down to fit A4, so the photo, the
   numbers and the floor plans — the three things anyone prints this for — all
   arrive smaller than they need to be.

   So print drops them. Nothing is deleted and nothing changes on screen; the
   page keeps every section it has, and only the printed copy is the shorter
   document. The scale factor plan-pdf.js works out then comes back towards 1,
   which is the whole point: less on the page means the rest is bigger.

   No Package block exists anywhere in these patterns, so there is none to hide;
   the reference's three price tiers are simply not part of this sheet. */

@media print {
  body.is-printing-sheet .obilis-sheet-custom,
  body.is-printing-sheet .obilis-sheet-promises,
  body.is-printing-sheet .obilis-sheet-points,
  body.is-printing-sheet .obilis-sheet-cta {
    display: none !important;
  }

  /* The footer keeps its contact line and loses its bulk: on paper it is a
     strip along the bottom, the way the reference sets it, not a block. */
  body.is-printing-sheet .obilis-sheet-foot {
    padding-block: 14px !important;
  }
}