/* ===========================================================================
   113 — "COPY AS IMAGE" CARD — TARGET REFERENCE BUILD
   ---------------------------------------------------------------------------
   Rebuilt to match the approved reference render ("Beverly Hills Tower"
   target) detail for detail: ivory card body, navy gradient header with a
   gold arc sweeping under it, gold "FOR RENT" pill, white rent panel with
   a gold spine next to the navy/gold "SPECIAL OFFER" panel, a six-column
   fact strip of navy gold-ringed icon medallions, a white "Unit Details"
   panel with a gold gradient status pill and two icon-led columns, a navy
   gold-bordered operational-note bar, a quiet disclaimer strip, and a navy
   footer with a gold arc on top and the gold skyline watermark.

   PROPORTIONS ARE CALIBRATED, NOT GUESSED. The reference render is
   1024x1536 (aspect 1.50). Measuring its band boundaries and scaling them
   to the card's fixed 640px width gives the section heights every size in
   this file is tuned to hit:

       header 115 | rent panel 144 | fact strip 124 | unit details ~275
       operational note 60 | disclaimer 34 | footer 92 | 16px between panels

   The first build of this file came out 640x1200 (aspect 1.88) — correct
   design, wrong rhythm: every padding, medallion and row was roughly a
   third too generous, so the exported PNG read as a long scroll instead of
   the compact reference card. The numbers below are what land it back on
   the reference's aspect.

   Two hard constraints shaped every rule here, both coming from
   html2canvas 1.4.1 (the rasterizer behind "Copy as Image"):

   1) It does not paint box-shadow and does not implement clip-path or
      SVG masks — so depth is built from borders + gradients only, and
      the header/footer arcs are real elliptical elements (pseudo
      elements with an elliptical border-radius), not clipped shapes.

   2) It ignores text-overflow:ellipsis and mis-measures the clip box of
      an overflow:hidden text node, which is what used to slice the
      bottom off every value in the exported PNG. So NOTHING in this
      card uses nowrap + overflow:hidden, and every text element carries
      an explicit line-height. css/114-export-card-render-fix.css keeps
      that guarantee locked in.

   A third, learned the hard way: background-position only takes the
   2-value form here. The 3/4-value form ("right bottom -4px") makes
   html2canvas throw and the whole export fail — nothing is copied at
   all. Offsets have to be baked into the asset instead.

   Class tree (.xcard-) is exclusive to the export card, built by
   avlBuildExportCardNode() in js/21-availability-list.js, so none of
   this can leak into the on-screen app UI.
   ========================================================================= */

/* The generic export wrapper (22-availability-list.css) used to add its
   own white frame + gold hairline around the card. The reference design
   is edge-to-edge, so the wrapper becomes a plain transparent holder. */
.avl-export-card{
  width:640px;
  padding:0;
  background:transparent;
  border-radius:28px;
  box-shadow:none;
}
.avl-export-card::before{display:none;}

.xcard{
  width:640px;
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(160deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 45%),
    linear-gradient(180deg,#F7F2E9 0%,#F3EDE2 100%);
  font-family:var(--font-body);
  color:#13294A;
  border:1px solid rgba(11,32,56,.10);
}

/* ---------------------------------------------------------------------------
   HEADER — navy gradient block, gold arc sweeping beneath it (target: 115px)
   ------------------------------------------------------------------------ */
.xcard-header{
  position:relative;
  z-index:2;
  padding:24px 26px 28px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%),
    linear-gradient(120deg,#08192C 0%,#12304F 52%,#0A1E36 100%);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
/* Gold arc (lower) + navy arc 2.5px higher = a 2.5px gold curve running
   under the header. Elliptical radius, no clip-path, so html2canvas
   reproduces it exactly. The ellipse is 16px tall, not the 46px of the
   first build: the reference's bottom edge is all but flat — a hairline
   with softly rounded corners — where a 46px ellipse sagged into a
   visible bowl across the middle of the card. */
.xcard-header:before,
.xcard-header:after{
  content:"";
  position:absolute;
  left:-1px;right:-1px;
  height:16px;
  border-radius:0 0 50% 50%/0 0 16px 16px;
}
.xcard-header:before{
  bottom:-8px;
  background:linear-gradient(90deg,#9A7136 0%,#E6C695 28%,#F3DCB4 50%,#E6C695 72%,#9A7136 100%);
}
.xcard-header:after{
  bottom:-5.5px;
  background:linear-gradient(120deg,#08192C 0%,#12304F 52%,#0A1E36 100%);
}
.xcard-h-left{position:relative;z-index:3;min-width:0;flex:1;}
.xcard-h-right{position:relative;z-index:3;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}

.xcard-h-title-row{display:flex;align-items:center;gap:11px;min-width:0;}
.xcard-h-title-row i{color:#E3C08A;font-size:19px;flex:none;}
.xcard-h-title{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:23px;
  line-height:1.25;
  color:#FFFFFF;
  letter-spacing:3.2px;
  text-transform:uppercase;
}
.xcard-h-sub-row{display:flex;align-items:center;gap:12px;margin-top:6px;padding-left:30px;}
.xcard-h-sub{
  font-size:11px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#E3C08A;
}
.xcard-h-sub-line{width:34px;height:1px;background:rgba(227,192,138,.75);flex:none;}
/* Unit code chip — it sits on the sub-line row, filling the empty band
   under the title that the reference layout leaves open, and reads as a
   quieter sibling of the gold "FOR RENT" pill opposite it (same pill
   shape and gold hairline, smaller and dimmer so it never competes with
   the building name above it). */
.xcard-h-unit{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  border:1px solid rgba(227,192,138,.45);
  border-radius:999px;
  padding:4px 13px;
  background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  color:#F2E0C2;
  font-size:10.5px;font-weight:700;line-height:1.3;letter-spacing:1.6px;text-transform:uppercase;
}
.xcard-h-unit i{font-size:9.5px;color:#E3C08A;}

.xcard-badge{
  display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid rgba(227,192,138,.9);
  border-radius:999px;
  padding:7px 18px 7px 14px;
  background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  color:#F2E0C2;
  font-size:12.5px;font-weight:700;line-height:1.2;letter-spacing:1.6px;text-transform:uppercase;
}
.xcard-badge i{font-size:14px;color:#E3C08A;padding-right:10px;border-right:1px solid rgba(227,192,138,.45);}
.xcard-date{
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.88);font-size:12px;line-height:1.3;font-weight:500;
}
.xcard-date i{color:#E3C08A;font-size:13px;}

/* ---------------------------------------------------------------------------
   BODY
   ------------------------------------------------------------------------ */
.xcard-body{position:relative;z-index:1;padding:34px 24px 30px;}

/* ---- Rent + Special Offer (target: 144px) ---- */
.xcard-price-row{
  display:flex;align-items:stretch;gap:16px;
  background:#FFFDF9;
  border:1px solid rgba(11,32,56,.08);
  border-radius:20px;
  padding:15px;
  margin-bottom:16px;
}
.xcard-rent-panel{
  flex:1 1 auto;min-width:0;
  border-left:4px solid #CEA577;
  border-radius:2px;
  padding:4px 0 4px 18px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
}
.xcard-rent-label{
  font-size:11.5px;line-height:1.3;font-weight:600;
  letter-spacing:3.2px;text-transform:uppercase;color:#A07B45;
}
/* The figure and its "/month" suffix are one unbreakable line in the
   reference. Rather than let a long figure overflow the panel (nowrap
   can't be rescued by ellipsis here — html2canvas ignores it), the
   builder tags long values with .is-long/.is-xlong and the size steps
   down to keep the line inside its column. */
.xcard-rent-value{
  font-family:var(--font-heading);font-weight:600;color:#10294A;
  font-size:33px;line-height:1.2;padding-bottom:1px;
}
.xcard-rent-value.is-long{font-size:28px;}
.xcard-rent-value.is-xlong{font-size:23px;}
.xcard-rent-value small{
  font-family:var(--font-body);font-weight:400;font-size:13px;color:#7C8797;margin-left:3px;
}
.xcard-rent-term{
  display:flex;align-items:center;gap:9px;color:#22385A;font-size:12.5px;line-height:1.4;font-weight:600;
}
.xcard-rent-term i{color:#B98C55;font-size:15px;}

.xcard-offer-panel{
  flex:0 0 246px;
  background:linear-gradient(140deg,#0A1E36 0%,#163355 58%,#0C2440 100%);
  border:1.5px solid rgba(227,192,138,.85);
  border-radius:16px;
  padding:13px 16px;
  display:flex;flex-direction:column;gap:8px;justify-content:center;
  color:#fff;
}
.xcard-offer-head{display:flex;align-items:center;gap:11px;}
.xcard-offer-icon{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#123052,#0A1E36);
  border:1px solid rgba(227,192,138,.65);
  display:flex;align-items:center;justify-content:center;color:#E3C08A;font-size:14px;
}
.xcard-offer-title{
  font-size:13.5px;font-weight:700;line-height:1.3;letter-spacing:1.2px;text-transform:uppercase;color:#E9CB9B;
}
.xcard-offer-text{font-size:11px;line-height:1.6;color:rgba(255,255,255,.88);overflow-wrap:break-word;}

/* ---- Fact strip: six gold-ringed navy medallions (target: 124px) ---- */
.xcard-facts{
  display:flex;align-items:stretch;
  background:#FFFDF9;
  border:1px solid rgba(11,32,56,.08);
  border-radius:20px;
  padding:16px 6px 13px;
  margin-bottom:16px;
}
.xcard-fact{
  flex:1;min-width:0;
  display:block;text-align:center;
  padding:0 7px;
  border-right:1px solid rgba(11,32,56,.09);
}
.xcard-fact:last-child{border-right:none;}
.xcard-fact-icon{
  width:40px;height:40px;border-radius:50%;
  margin:0 auto 10px;
  background:linear-gradient(145deg,#15314F 0%,#0A1E36 100%);
  border:1px solid rgba(227,192,138,.5);
  color:#E3C08A;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.xcard-fact b{
  display:block;
  font-size:12.5px;font-weight:700;line-height:1.3;color:#10294A;
  min-height:32px;max-width:100%;
}
.xcard-fact b.is-long{font-size:11px;}
.xcard-fact b.is-xlong{font-size:9.5px;line-height:1.28;}
.xcard-fact small{
  display:block;margin-top:2px;
  font-size:10.5px;font-weight:400;line-height:1.35;letter-spacing:0;
  text-transform:none;color:#7C8797;
}
.xcard-fact.is-positive b{color:#10294A;}

/* ---- Unit Details (target: ~275px) ---- */
.xcard-ud{
  background:#FFFDF9;
  border:1px solid rgba(11,32,56,.08);
  border-radius:20px;
  padding:16px 20px 8px;
  margin-bottom:16px;
}
.xcard-ud-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:2px;
  border-bottom:1px solid rgba(11,32,56,.10);
}
.xcard-ud-head-left{display:flex;align-items:center;gap:12px;min-width:0;}
.xcard-ud-icon{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,#15314F 0%,#0A1E36 100%);
  border:1px solid rgba(227,192,138,.5);
  color:#E3C08A;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.xcard-ud-title{
  font-family:var(--font-heading);font-weight:500;
  font-size:18px;line-height:1.35;color:#10294A;
  letter-spacing:1.4px;text-transform:uppercase;padding-bottom:1px;
}
.xcard-ud-status{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:7px 20px;border-radius:999px;
  font-size:12px;font-weight:700;line-height:1.2;letter-spacing:1.4px;text-transform:uppercase;
  background:linear-gradient(90deg,#F6E7CE 0%,#E7C79B 100%);
  color:#2E2211;
  border:1px solid rgba(185,140,85,.55);
}
.xcard-ud-status i{font-size:8px;color:#B98C55;}
.xcard-ud-status.is-booked{background:linear-gradient(90deg,#FFF3D2,#F0DDA6);color:#5E4405;border-color:rgba(190,160,80,.55);}
.xcard-ud-status.is-booked i{color:#A9871F;}
.xcard-ud-status.is-deposit{background:linear-gradient(90deg,#FFEFE0,#F6D2AC);color:#6A3A0C;border-color:rgba(190,130,70,.55);}
.xcard-ud-status.is-deposit i{color:#B4682A;}
.xcard-ud-status.is-contract{background:linear-gradient(90deg,#E9F6ED,#CDE8D6);color:#17492F;border-color:rgba(100,160,120,.55);}
.xcard-ud-status.is-contract i{color:#2F7A4F;}
.xcard-ud-status.is-leased{background:linear-gradient(90deg,#FBE9E6,#F2C9C2);color:#6E2019;border-color:rgba(190,110,100,.55);}
.xcard-ud-status.is-leased i{color:#A83A2C;}

.xcard-ud-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
.xcard-ud-col{display:flex;flex-direction:column;}
.xcard-ud-row{display:flex;align-items:center;gap:11px;}
/* The row divider belongs to the label+value block, not the whole row,
   so it starts after the icon medallion exactly like the reference —
   which is also why the icon sits outside .xcard-ud-row-main. */
.xcard-ud-row-main{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(11,32,56,.08);
}
.xcard-ud-col .xcard-ud-row:last-child .xcard-ud-row-main{border-bottom:none;}
.xcard-ud-row-icon{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:#F7EEE1;
  border:1px solid rgba(206,165,119,.40);
  color:#16324F;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
/* 80px, not the old 104px: "Beverly Hills Tower" has to sit on ONE line
   in the value column like the reference, and the longest label
   ("Building Name") still fits 80px at 11.5px. */
.xcard-ud-row-label{
  flex:0 0 80px;max-width:80px;
  font-size:11.5px;line-height:1.4;font-weight:400;color:#7C8797;
}
.xcard-ud-row-val{
  flex:1 1 auto;min-width:0;
  font-size:12.5px;line-height:1.4;font-weight:600;color:#10294A;
  text-align:left;padding-bottom:1px;
}

/* ---- Operational note (target: 60px) ---- */
.xcard-opnote{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  background:linear-gradient(120deg,#0A1E36 0%,#163355 55%,#0B2138 100%);
  border:1.5px solid rgba(227,192,138,.8);
  border-radius:18px;
  padding:11px 16px;
  margin-bottom:16px;
}
.xcard-opnote-label{
  display:flex;align-items:center;gap:12px;flex:none;
  font-size:12px;font-weight:700;line-height:1.3;letter-spacing:1.6px;text-transform:uppercase;color:#E9CB9B;
}
.xcard-opnote-label i{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#123052,#0A1E36);
  border:1px solid rgba(227,192,138,.6);
  display:flex;align-items:center;justify-content:center;
  color:#E3C08A;font-size:14px;
}
.xcard-opnote-sep{width:1px;height:24px;background:rgba(255,255,255,.22);flex:none;}
.xcard-opnote-signal{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  border:1px solid rgba(227,192,138,.75);
  border-radius:999px;
  padding:6px 14px;
  color:#fff;font-size:11px;font-weight:700;line-height:1.3;
  letter-spacing:1.2px;text-transform:uppercase;
}
.xcard-opnote-signal i{font-size:11px;color:#E3C08A;}
.xcard-opnote-raw{color:rgba(255,255,255,.66);font-size:11.5px;line-height:1.45;font-weight:400;overflow-wrap:break-word;}

/* ---- Disclaimer (target: 34px) ---- */
.xcard-disclaimer{
  display:flex;align-items:center;gap:10px;
  background:#FFFDF9;
  border:1px solid rgba(11,32,56,.08);
  border-radius:16px;
  padding:7px 16px;
  font-size:10.5px;line-height:1.5;color:#6F7A89;
}
.xcard-disclaimer i{color:#94A0B0;font-size:13px;flex:none;}

/* ---------------------------------------------------------------------------
   FOOTER — navy block with a gold arc curving over it + skyline watermark
   (target: 92px)
   ------------------------------------------------------------------------ */
.xcard-footer{
  position:relative;z-index:2;
  background:linear-gradient(120deg,#08192C 0%,#12304F 55%,#0A1E36 100%);
  padding:26px 28px 24px;
  display:flex;align-items:center;gap:20px;
}
.xcard-footer:before,
.xcard-footer:after{
  content:"";position:absolute;left:-1px;right:-1px;height:16px;
  border-radius:50% 50% 0 0/16px 16px 0 0;
}
.xcard-footer:before{
  top:-8px;
  background:linear-gradient(90deg,#9A7136 0%,#E6C695 28%,#F3DCB4 50%,#E6C695 72%,#9A7136 100%);
}
.xcard-footer:after{
  top:-5.5px;
  background:linear-gradient(120deg,#08192C 0%,#12304F 55%,#0A1E36 100%);
}
/* Skyline watermark sits above the arcs but below the text. The old
   asset was a solid WHITE, near-square city block — on navy it read as
   a grey smudge cropped down its middle, nothing like the reference's
   thin gold panorama. footer-skyline-doha-gold.png is drawn to the
   footer's own aspect (gold line art, horizon line, faint reflection),
   so it stretches edge to edge with a plain 2-value background-position
   — see the html2canvas note at the top of this file. */
.xcard-footer-sky{
  position:absolute;inset:0;z-index:3;
  background-image:url("../assets/footer-skyline-doha-gold.png");
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  opacity:.6;
}
/* Capped at 56%: a long building name ("The Pearl Porto Arabia Tower
   Twenty Nine") used to push the tagline sideways until it sat on top of
   the skyline towers. Capping the name block keeps the tagline where the
   reference puts it — clear of the watermark — and lets the name wrap
   instead. */
.xcard-footer-left{position:relative;z-index:4;display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto;max-width:56%;}
.xcard-footer-left i{color:#E3C08A;font-size:18px;flex:none;}
.xcard-footer-name{
  font-family:var(--font-heading);font-weight:500;font-size:16.5px;line-height:1.3;color:#fff;padding-bottom:1px;
}
.xcard-footer-area{font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.62);margin-top:2px;}
.xcard-footer-sep{position:relative;z-index:4;width:1px;align-self:stretch;min-height:40px;background:rgba(255,255,255,.22);flex:none;}
.xcard-footer-tag{
  position:relative;z-index:4;flex:1 1 auto;
  font-size:9.5px;font-weight:600;letter-spacing:2px;line-height:1.85;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.xcard-footer-tag b{display:block;font-weight:600;color:rgba(255,255,255,.88);}

/* Font Awesome draws fa-bed and fa-couch low inside their own em box —
   inside a fixed-size medallion that reads as a visibly off-centre icon
   (up to ~23% of the circle's diameter of dead space above it) while
   every other icon in the strip sits true. Nudged here, narrowly: only
   these two glyphs, only inside a circular medallion, so the standalone
   icons (the broom badge on the operational-note bar, for one) are
   untouched. */
.xcard-fact-icon .fa-bed,
.xcard-fact-icon .fa-couch,
.xcard-ud-row-icon .fa-bed,
.xcard-ud-row-icon .fa-couch{
  position:relative;
  top:-1px;
}