/* ════════════════════════════════════════════════════════════════════════════
   TechyRobber — Homepage (final: layout 1 + layout 2 mix)
   Loaded only on the homepage (index.php → $meta['css']).
   Background, header and footer come from style.css and stay unchanged.
   Photos: every article photo is 16:9 (as uploaded). Small boxes are 16:9;
   big boxes of another shape use .fit (whole photo + blurred fill).
   ════════════════════════════════════════════════════════════════════════════ */
.hm {
  --c-card:#0A3542; --c-card2:#062C38; --c-line:#12485A; --c-line2:#1B5568; --c-img:#0E3A48; --c-deep:#001B24;
  --c-head:#FFFFFF; --c-body:#C4D1DA; --c-muted:#8FA9B6; --c-link:#7FC4DA; --c-acc:var(--accent, #F5A623); --c-ink:#002530;
  color:var(--c-body); font-size:15px; line-height:1.55; padding-bottom:8px;
  --r:0px;      /* corners of photos and cards: 0 = straight */
  --r-btn:3px;  /* corners of buttons and inputs */
}
.hm :where(a) { color:inherit; text-decoration:none; }   /* low priority, so link classes below can set their own colour */
.hm-w { max-width:1240px; margin:0 auto; padding-left:16px; padding-right:16px; }
.hm-kick { font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--c-acc); }
.hm-meta { font-size:12.5px; color:var(--c-muted); font-variant-numeric:tabular-nums; }
.hm-t { color:var(--c-head); transition:color .15s; }
.hm a:hover .hm-t { color:#FFE2A8; }
.hm-pic { position:relative; display:block; overflow:hidden; background:var(--c-img); border-radius:var(--r); }
.hm-pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.hm a:hover .hm-pic img { transform:scale(1.04); }
.hm-pic.fit { background:#000; }
.hm-pic.fit::before { content:""; position:absolute; inset:-30px; background:var(--src) center/cover no-repeat; filter:blur(26px) saturate(1.2) brightness(.55); }
.hm-pic.fit img { object-fit:contain; }
.hm a:hover .hm-pic.fit img { transform:scale(1.02); }
.hm-box { background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r); }
.hm-sh { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:flex-end; padding-bottom:12px; margin-bottom:20px; border-bottom:2px solid var(--c-acc); }
.hm-sh h2 { margin:0; color:var(--c-head); font-size:clamp(22px,2.4vw,28px); font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.hm-sh .lbl { display:block; margin-bottom:6px; }
.hm-sh .links { display:flex; flex-wrap:wrap; gap:6px 18px; }
.hm-more { font-size:14px; font-weight:700; color:var(--c-link); white-space:nowrap; transition:color .15s; }
.hm-more:hover { color:var(--c-acc); }
.hm-sec { padding-top:64px; }
.hm a:focus-visible, .hm button:focus-visible { outline:2px solid var(--c-acc); outline-offset:3px; border-radius:4px; }

/* Masthead + ticker */
.hm-mast { display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between; align-items:center; padding:18px 0 12px; border-bottom:1px solid var(--c-acc); font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); }
.hm-mast .c { color:var(--c-acc); }
.hm-tick { display:flex; align-items:center; gap:14px; margin-top:14px; padding:10px 14px; border-radius:var(--r); border:1px solid var(--c-line); background:var(--c-card2); overflow:hidden; }
.hm-tick b { flex:none; padding:3px 8px; border-radius:4px; background:var(--c-acc); color:var(--c-ink); font-size:11px; font-weight:800; letter-spacing:.1em; }
.hm-tick .trk { flex:1; min-width:0; overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent); mask-image:linear-gradient(90deg,#000 90%,transparent); }
.hm-tick .trk span { display:inline-block; animation:hmTick 45s linear infinite; }
.hm-tick:hover .trk span { animation-play-state:paused; }
.hm-tick a { font-size:14px; font-weight:700; color:var(--c-head); }
.hm-tick a:hover { color:var(--c-acc); }
.hm-tick i { font-style:normal; color:var(--c-acc); margin:0 14px; }
@keyframes hmTick { to { transform:translateX(-50%); } }

/* Cover + top stories */
.hm-top { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:24px; padding-top:22px; }
.hm-cover { display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; background:var(--c-deep); border:1px solid var(--c-line); }
.hm-cover-img { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--c-img); }
.hm-cover-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.hm-cover:hover .hm-cover-img img { transform:scale(1.03); }
.hm-cover-img .hm-badge { position:absolute; top:16px; left:16px; z-index:1; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.hm-cover-b { flex:1; display:flex; flex-direction:column; gap:10px; padding:24px 30px 26px; border-top:3px solid var(--c-acc); }
.hm-cover-b h1 { margin:0; color:#fff; font-size:clamp(26px,3vw,40px); line-height:1.1; font-weight:800; letter-spacing:-.028em; transition:color .15s; }
.hm-cover:hover .hm-cover-b h1 { color:#FFE2A8; }
.hm-cover-b p { margin:0; font-size:16px; line-height:1.6; color:var(--c-body); max-width:62ch; }
.hm-cover-row { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; }
.hm-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-btn); background:var(--c-acc); color:var(--c-ink); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.hm-btnline { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 20px; border:1px solid var(--c-acc); border-radius:var(--r-btn); color:var(--c-acc); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:background .15s, color .15s; }
.hm-cover:hover .hm-btnline { background:var(--c-acc); color:var(--c-ink); }
.hm-ts { padding:20px 22px; display:flex; flex-direction:column; }
.hm-ts > .hm-kick { font-size:13px; margin-bottom:6px; }
.hm-ts a { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--c-line); }
.hm-ts a:last-child { border-bottom:0; }
.hm-ts .n { flex:none; width:30px; font-size:28px; line-height:1; font-weight:800; color:var(--c-acc); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.hm-ts .t { display:flex; flex-direction:column; gap:4px; min-width:0; }
.hm-ts .c { font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--c-muted); }
.hm-ts .hm-t { font-size:16px; line-height:1.32; font-weight:700; }

/* Numbered 02–05 */
.hm-num { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:24px; border-top:1px solid var(--c-line); }
.hm-num a { display:flex; gap:16px; padding:20px 20px 20px 0; border-bottom:1px solid var(--c-line); }
.hm-num .n { flex:none; font-size:36px; line-height:1; font-weight:800; letter-spacing:-.04em; color:var(--c-acc); font-variant-numeric:tabular-nums; }
.hm-num .t { display:flex; flex-direction:column; gap:6px; min-width:0; }
.hm-num .c { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--c-muted); }
.hm-num .hm-t { font-size:17px; line-height:1.3; font-weight:800; letter-spacing:-.01em; }


/* Price watch */
.hm-prices { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; }
.hm-pc { display:flex; flex-direction:column; gap:8px; padding:18px; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r); transition:border-color .15s, transform .2s; }
.hm-pc:hover { border-color:var(--c-line2); transform:translateY(-2px); }
.hm-pc .m { font-size:14.5px; font-weight:700; line-height:1.3; color:var(--c-head); }
.hm-pc .p { font-size:28px; line-height:1; font-weight:800; letter-spacing:-.03em; color:var(--c-acc); font-variant-numeric:tabular-nums; }
.hm-pc.soon { background:var(--c-card2); border-style:dashed; }
.hm-pc.soon .p { color:var(--c-head); font-size:22px; }
.hm-tag { align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:rgba(127,196,218,.12); color:var(--c-link); }
.hm-pc.soon .hm-tag { background:rgba(245,166,35,.14); color:var(--c-acc); }

/* Latest + sidebar */
.hm-main { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; }
.hm-row { display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--c-line); }
.hm-row:first-child { padding-top:0; }
.hm-row[hidden] { display:none; }
.hm-row .hm-pic { flex:none; width:224px; aspect-ratio:16/9; max-width:40%; }
.hm-row .t { display:flex; flex-direction:column; gap:6px; min-width:0; }
.hm-row .hm-t { font-size:19px; line-height:1.3; font-weight:800; letter-spacing:-.01em; }
.hm-row p { margin:0; font-size:15px; line-height:1.55; }
.hm-load { margin-top:20px; width:100%; min-height:50px; border-radius:var(--r-btn); border:1px solid var(--c-line2); background:transparent; color:var(--c-head); font:700 15px var(--font); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s; }
.hm-load[hidden] { display:none; }
.hm-load:hover { border-color:var(--c-acc); background:rgba(245,166,35,.06); }
.hm-empty { padding:24px 0; color:var(--c-muted); }
.hm-side { display:flex; flex-direction:column; gap:22px; position:sticky; top:84px; }
.hm-side .hm-box { padding:20px; }
.hm-side h3 { margin:0 0 12px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--c-acc); }
.hm-mr a { display:flex; gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--c-line); }
.hm-mr a:last-child { border-bottom:0; padding-bottom:2px; }
.hm-mr .n { flex:none; width:18px; font-size:15px; font-weight:800; color:var(--c-acc); font-variant-numeric:tabular-nums; }
.hm-mr .hm-t { font-size:15px; line-height:1.4; font-weight:700; }
.hm-follow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hm-follow a { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border-radius:var(--r-btn); border:1px solid var(--c-line2); transition:border-color .15s; }
.hm-follow a:hover { border-color:var(--c-acc); }
.hm-follow b { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--c-head); }
.hm-follow b svg { width:15px; height:15px; flex:none; }
.hm-follow small { font-size:12px; color:var(--c-muted); font-variant-numeric:tabular-nums; }
.hm-ad { margin-top:40px; display:flex; justify-content:center; }
.hm-side .hm-ad { margin-top:0; }

/* Review / feature block */
.hm-rv { display:flex; flex-wrap:wrap; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r); overflow:hidden; }
.hm-rv.flip { flex-direction:row-reverse; }
.hm-rv .hm-pic { flex:1 1 520px; min-height:440px; border-radius:0; }
.hm-rv-b { flex:1 1 400px; min-width:0; padding:36px; display:flex; flex-direction:column; gap:16px; }
.hm-rv-b h3 { margin:0; font-size:clamp(24px,2.6vw,32px); line-height:1.12; font-weight:800; letter-spacing:-.025em; }
.hm-score { display:flex; align-items:baseline; gap:8px; }
.hm-score b { font-size:60px; line-height:1; font-weight:800; letter-spacing:-.04em; color:var(--c-acc); font-variant-numeric:tabular-nums; }
.hm-score span { font-size:15px; color:var(--c-muted); }
.hm-verdict { margin:0; font-size:16px; line-height:1.55; color:var(--c-head); font-weight:600; }
.hm-quote { margin:0; padding-left:16px; border-left:3px solid var(--c-acc); font-size:18px; line-height:1.5; font-weight:700; color:var(--c-head); }
.hm-specs div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--c-line); font-size:14px; }
.hm-specs span { color:var(--c-muted); }
.hm-specs b { color:var(--c-head); text-align:right; font-variant-numeric:tabular-nums; }
.hm-by { display:flex; align-items:center; gap:12px; }
.hm-by .av { width:44px; height:44px; border-radius:50%; background:var(--c-acc); color:var(--c-ink); display:flex; align-items:center; justify-content:center; font-weight:800; flex:none; overflow:hidden; }
.hm-by .av img { width:100%; height:100%; object-fit:cover; }
.hm-by b { display:block; color:var(--c-head); font-size:15px; }
.hm-acts { display:flex; flex-wrap:wrap; gap:12px; }
.hm-btn { display:inline-flex; align-items:center; min-height:46px; padding:0 22px; border-radius:var(--r-btn); background:var(--c-acc); color:var(--c-ink) !important; font:800 14px var(--font); border:0; cursor:pointer; transition:background .15s, transform .15s; }
.hm-btn:hover { background:#FFB838; transform:translateY(-1px); }
.hm-btn-g { display:inline-flex; align-items:center; min-height:46px; padding:0 22px; border-radius:var(--r-btn); border:1px solid var(--c-line2); font-size:14px; font-weight:700; color:var(--c-head) !important; }
.hm-btn-g:hover { border-color:var(--c-link); }
.hm-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:18px; }
.hm-rc { display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r); background:var(--c-card); border:1px solid var(--c-line); transition:border-color .15s, transform .2s; }
.hm-rc:hover { border-color:var(--c-line2); transform:translateY(-2px); }
.hm-rc .hm-pic { aspect-ratio:16/9; border-radius:0; }
.hm-rc .b { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.hm-rc .hm-t { font-size:17px; line-height:1.32; font-weight:800; }
.hm-rc .foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:8px; border-top:1px solid var(--c-line); }
.hm-rc .foot b { font-size:15px; color:var(--c-acc); font-variant-numeric:tabular-nums; }

/* Section columns */
.hm-cols { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:52px 36px; }
.hm-col { min-width:0; }
.hm-col .lead { display:flex; flex-direction:column; gap:12px; padding-bottom:4px; }
.hm-col .lead .hm-pic { aspect-ratio:16/9; }
.hm-col .lead .hm-t { font-size:19px; line-height:1.3; font-weight:800; letter-spacing:-.01em; }
.hm-col .ml { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--c-line); font-size:15px; line-height:1.45; font-weight:600; color:var(--c-body); transition:color .15s; }
.hm-col .ml::before { content:""; flex:none; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--c-line2); }
.hm-col .ml:hover { color:var(--c-head); }

/* Watch band */
.hm-band { margin-top:72px; background:var(--c-deep); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.hm-band .hm-w { padding-top:52px; padding-bottom:52px; }
.hm-watch { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:26px; }
.hm-vmain { display:flex; flex-direction:column; gap:12px; }
.hm-vmain .hm-pic { aspect-ratio:16/9; }
.hm-vmain .hm-t { font-size:clamp(20px,2.2vw,26px); line-height:1.25; font-weight:800; letter-spacing:-.02em; }
.hm-vlist { display:flex; flex-direction:column; gap:16px; }
.hm-vlist a { display:flex; gap:14px; align-items:center; }
.hm-vlist .hm-pic { flex:none; width:168px; aspect-ratio:16/9; }
.hm-vlist .hm-t { font-size:15.5px; line-height:1.35; font-weight:700; }
.hm-play { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; color:#fff; }
.hm-play span { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,.8); background:rgba(0,18,24,.45); backdrop-filter:blur(4px); transition:background .15s, transform .2s, color .15s; }
.hm-play.sm span { width:40px; height:40px; }
.hm a:hover .hm-play span { background:var(--c-acc); border-color:var(--c-acc); color:var(--c-ink); transform:scale(1.06); }
.hm-stories { display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.hm-watch + .hm-stories { margin-top:40px; }
.hm-story { scroll-snap-align:start; }
.hm-story .hm-pic { aspect-ratio:9/16; border-radius:var(--r); outline:2px solid var(--c-acc); outline-offset:-2px; }
.hm-story .hm-pic::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,18,24,.15), transparent 30%, transparent 50%, rgba(0,18,24,.92)); }
.hm-story .bars { position:absolute; top:10px; left:10px; right:10px; z-index:1; display:flex; gap:3px; }
.hm-story .bars i { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.75); }
.hm-story .cap { position:absolute; left:10px; right:10px; bottom:10px; z-index:1; font-size:13.5px; line-height:1.3; font-weight:800; color:#fff; }

/* Gallery */
.hm-gal { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:440px; }
.hm-gal a { position:relative; min-height:0; }
.hm-gal a:first-child { grid-row:span 2; }
.hm-gal .hm-pic { position:absolute; inset:0; }
.hm-gal .hm-pic::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,18,24,.88)); }
.hm-gal .cap { position:absolute; left:14px; right:14px; bottom:12px; z-index:1; color:#fff; font-weight:800; font-size:15px; }

/* Newsletter band */
.hm-nl { display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between; padding:40px; border-radius:var(--r); border:1px solid var(--c-line);
  background:radial-gradient(120% 140% at 100% 0%, rgba(245,166,35,.14), transparent 50%), var(--c-card); }
.hm-nl .tx { flex:1 1 360px; min-width:0; }
.hm-nl h2 { margin:6px 0 8px; color:var(--c-head); font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-.025em; }
.hm-nl p { margin:0; font-size:16px; }
.hm-nl form { flex:1 1 440px; display:flex; flex-wrap:wrap; gap:10px; position:relative; }
.hm-nl input[type=text], .hm-nl input[type=email] { flex:1 1 180px; min-width:0; min-height:50px; padding:0 16px; border-radius:var(--r-btn); border:1px solid var(--c-line2); background:rgba(0,18,24,.5); color:#fff; font:500 15px var(--font); outline:none; }
.hm-nl input::placeholder { color:#6E8D99; }
.hm-nl input:focus { border-color:var(--c-acc); }
.hm-nl .note { flex-basis:100%; font-size:13px; color:var(--c-muted); }

/* Borderless option: add class "flat" next to "hm" in index.php (<div class="hm flat">) */
.hm.flat .hm-box, .hm.flat .hm-rc, .hm.flat .hm-rv, .hm.flat .hm-cover, .hm.flat .hm-nl, .hm.flat .hm-tick { background:transparent; border-color:transparent; }
.hm.flat .hm-ts, .hm.flat .hm-side .hm-box { padding-left:0; padding-right:0; padding-top:0; }
.hm.flat .hm-rc .b { padding:14px 0 0; }
.hm.flat .hm-rv-b { padding:8px 0 8px 36px; }
.hm.flat .hm-rv.flip .hm-rv-b { padding:8px 36px 8px 0; }
.hm.flat .hm-cover-b { padding:22px 0 0; border-top:0; }
.hm.flat .hm-tick { padding-left:0; padding-right:0; }
.hm.flat .hm-pc { background:transparent; border:0; border-top:2px solid var(--c-line2); padding:16px 0 0; }
.hm.flat .hm-nl { padding:0; }

/* Responsive */
@media (max-width:1180px) { .hm-num { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:980px) {
  .hm-top, .hm-main, .hm-watch { grid-template-columns:minmax(0,1fr); }
  .hm-side { position:static; }
  .hm-cols, .hm-cards { grid-template-columns:minmax(0,1fr); }
  .hm-rv .hm-pic { min-height:0; aspect-ratio:16/10; flex-basis:100%; }
}
@media (max-width:720px) {
  .hm-cover-b { padding:18px 18px 20px; }
  .hm-cover-b p { display:none; }
  .hm-num { grid-template-columns:minmax(0,1fr); } .hm-num a { padding-right:0; }
  .hm-prices { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .hm-pc { padding:14px; } .hm-pc .p { font-size:22px; } .hm-pc.soon .p { font-size:18px; }
  .hm-row .hm-pic { width:120px; } .hm-row .hm-t { font-size:16px; } .hm-row p { display:none; }
  .hm-rv.flip { flex-direction:column; }
  .hm-rv-b { padding:22px; } .hm-score b { font-size:48px; }
  .hm-vlist .hm-pic { width:128px; }
  .hm-gal { grid-template-columns:1fr 1fr; grid-template-rows:200px 130px 130px; height:auto; }
  .hm-gal a:first-child { grid-column:span 2; grid-row:auto; }
  .hm-nl { padding:24px; }
  .hm-mast .r { display:none; }
}
@media (prefers-reduced-motion: reduce) { .hm-tick .trk span { animation:none; } .hm *, .hm *::before, .hm *::after { transition:none !important; } }