/* ============================================================
   ITX — App components (PHP-driven, not in the base design file)
   Uses the design tokens from styles.css (navy / orange, radii…).
   Covers: Font Awesome icon sizing, the AJAX "Our Works" section,
   the project modal, the blog list, the blog post, and content pages.
   ============================================================ */

/* ---------- Font Awesome icons inside design containers ---------- */
.card .c-icon i { font-size: 28px; line-height: 1; }
.info-item .ii-icon i { font-size: 20px; line-height: 1; }
.footer-social a i { font-size: 18px; line-height: 1; }
.t-stars { font-size: 1.05rem; gap: 2px; }

/* ---------- Dynamic images that fill branded (gradient) media slots ---- */
.about-media .shot.has-photo { background: var(--surface); }
.about-media .shot.has-photo img { width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 1; }
/* Keep the floating "client satisfaction" badge above the photo
   (the .shot img has z-index:1, so the badge needs a higher one). */
.about-media { z-index: 1; }
.about-media .about-badge { z-index: 3; }
.post .post-media.has-photo img { width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 1; }
.hero .hero-note { color: var(--muted); font-size: 1rem; margin: -16px 0 30px; max-width: 540px; }

/* About rich content (multi-paragraph, bilingual swap) */
.about-copy .about-rich { margin-bottom: 26px; }
.about-copy .about-rich p { color: var(--text); font-size: 1.05rem; margin-bottom: 1rem; }
.about-copy .about-rich p:last-child { margin-bottom: 0; }

/* ---------- Dynamic contact map embed ---------- */
.contact-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 28px; }
.contact-map iframe { width: 100%; height: 260px; border: 0; display: block; }

/* ============================================================
   OUR WORKS  (dynamic, AJAX-rendered)
   ============================================================ */
.works-categories { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.cat-btn {
  font-family: var(--ff); font-weight: 600; font-size: .92rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); padding: 9px 20px; border-radius: 999px;
  cursor: pointer; transition: all .25s var(--ease); display: inline-flex; align-items: center; gap: 7px;
}
.cat-btn:hover { border-color: var(--navy-300); color: var(--navy-600); }
.cat-btn.active { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }

.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; min-height: 200px; }
.work-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  cursor: pointer;
}
.work-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.work-card-image { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--grad-brand); }
.work-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.work-card:hover .work-card-image img { transform: scale(1.06); }
.work-card-image img.work-card-fallback { object-fit: contain; padding: 18%; filter: brightness(0) invert(1); opacity: .9; }
.work-badges { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 2; }
.badge-category { background: rgba(8,18,48,.82); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 600; backdrop-filter: blur(4px); display: inline-flex; align-items: center; gap: 5px; }
.badge-programming { background: var(--orange-500); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.work-card-body { padding: 22px 22px 24px; }
.work-card-body h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 8px; }
.work-card-body p { color: var(--muted); font-size: .92rem; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.work-meta { font-size: .82rem; color: var(--navy-300); }
.btn-view-work {
  padding: 8px 16px; background: var(--navy-700); color: #fff; border: none; border-radius: 999px;
  font-family: var(--ff); font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .25s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-view-work:hover { background: var(--orange-500); }
.works-loading, .works-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 2rem; color: var(--muted); }
.works-loading i { font-size: 2rem; color: var(--navy-600); display: block; margin-bottom: 1rem; animation: fa-spin 1s linear infinite; }
.works-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--navy-100); }
@keyframes fa-spin { to { transform: rotate(360deg); } }

/* ============================================================
   PROJECT MODAL
   ============================================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(8,18,48,.72); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); backdrop-filter: blur(5px); }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 960px; max-height: 92vh; overflow-y: auto; transform: translateY(24px) scale(.97); transition: transform .3s var(--ease); }
.modal-overlay.active .modal-box { transform: translateY(0) scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.4rem 2rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 10; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-header-info h2 { font-size: 1.3rem; color: var(--ink); margin-bottom: .5rem; }
.modal-header-badges { display: flex; gap: .45rem; flex-wrap: wrap; }
.modal-close { width: 34px; height: 34px; background: var(--bg-soft); border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--text); flex-shrink: 0; transition: all .2s; display: flex; align-items: center; justify-content: center; margin-inline-start: 1rem; }
.modal-close:hover { background: var(--orange-500); color: #fff; }
.modal-body { display: grid; grid-template-columns: 1fr 1fr; }
.modal-media { background: var(--navy-900); overflow: hidden; display: flex; flex-direction: column; min-height: 380px; }
.modal-media-main { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; background: #000; }
.modal-media-main img { width: 100%; max-height: 340px; object-fit: contain; }
.modal-media-main iframe { width: 100%; height: 300px; border: none; }
.media-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; background: rgba(255,255,255,.15); border: none; border-radius: 50%; color: #fff; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 5; }
.media-nav-btn:hover { background: rgba(255,255,255,.3); }
.media-nav-prev { left: 10px; }
.media-nav-next { right: 10px; }
.modal-media-caption { padding: 6px 12px; background: rgba(0,0,0,.55); color: rgba(255,255,255,.75); font-size: .82rem; text-align: center; }
.modal-media-thumbs { display: flex; gap: 6px; padding: 8px 10px; background: rgba(0,0,0,.45); overflow-x: auto; }
.media-thumb { width: 68px; height: 48px; border-radius: 6px; overflow: hidden; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; position: relative; opacity: .6; transition: all .2s; }
.media-thumb:hover { opacity: .9; }
.media-thumb.active { border-color: var(--orange-500); opacity: 1; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; background: rgba(0,0,0,.35); }
.no-media-msg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,.35); gap: .75rem; font-size: .9rem; }
.no-media-msg i { font-size: 2.5rem; }
.modal-details { padding: 2rem; display: flex; flex-direction: column; gap: 1.4rem; overflow-y: auto; }
.modal-description { color: var(--text); line-height: 1.85; font-size: .95rem; }
.modal-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-info-item label { display: block; font-size: .75rem; color: var(--navy-300); margin-bottom: .2rem; letter-spacing: .4px; text-transform: uppercase; }
.modal-info-item span { font-weight: 700; color: var(--ink); font-size: .93rem; }
.modal-tech-label { font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
.modal-technologies { display: flex; flex-wrap: wrap; gap: .45rem; }
.tech-tag { background: var(--bg-soft); color: var(--navy-600); padding: .3rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.modal-actions { display: flex; gap: .7rem; flex-wrap: wrap; padding-top: .75rem; border-top: 1px solid var(--line); }
.btn-demo { padding: .7rem 1.5rem; background: var(--orange-500); color: #fff; border: none; border-radius: 999px; font-family: var(--ff); font-size: .95rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; transition: all .3s var(--ease); box-shadow: var(--shadow-orange); }
.btn-demo:hover { background: var(--orange-600); transform: translateY(-2px); }

@media (max-width: 760px) {
  .works-grid { grid-template-columns: 1fr; }
  .modal-body { grid-template-columns: 1fr; }
  .modal-media { min-height: 240px; }
  .modal-media-main { min-height: 200px; }
  .modal-media-main img { max-height: 220px; }
  .modal-media-main iframe { height: 200px; }
  .modal-header { padding: 1rem 1.2rem; }
  .modal-details { padding: 1.2rem; }
  .modal-info-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SUB-PAGE HERO (blog / content pages) — light, clears fixed nav
   ============================================================ */
.subhero { padding-block: 140px 56px; background: var(--bg); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; text-align: center; }
.subhero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% -20%, rgba(255,122,26,.10), transparent 55%), radial-gradient(circle at 0% 120%, rgba(36,67,127,.10), transparent 55%); pointer-events: none; }
.subhero .container { position: relative; z-index: 1; }
.subhero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 12px; }
.subhero p { color: var(--muted); font-size: 1.05rem; }

/* ============================================================
   BLOG LIST  (blog.php)
   ============================================================ */
.blog-search-wrap { max-width: 560px; margin: 26px auto 0; position: relative; }
.blog-search-wrap input { width: 100%; font-family: var(--ff); font-size: 1rem; color: var(--ink); padding: 14px 22px; padding-inline-start: 52px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.blog-search-wrap input:focus { outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 4px var(--orange-50); }
.blog-search-wrap button { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: none; color: var(--navy-600); cursor: pointer; font-size: 1.05rem; }

.blog-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.blog-filters .filter-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.blog-filters .filter-btn small { opacity: .7; font-weight: 600; }

.blog-toolbar { color: var(--muted); font-size: .92rem; margin-bottom: 22px; }
.blog-toolbar strong { color: var(--ink); }
.blog-toolbar .clear { color: var(--orange-600); margin-inline-start: .5rem; font-weight: 700; }

.blog-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; display: flex; flex-direction: column; height: 100%; color: inherit; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.bc-img { aspect-ratio: 16/9; overflow: hidden; position: relative; background: var(--grad-brand); flex-shrink: 0; }
.bc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.blog-card:hover .bc-img img { transform: scale(1.06); }
.bc-cat { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; background: var(--orange-500); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.bc-no-img { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.55); font-size: 2.6rem; }
.bc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.bc-body h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-body p { color: var(--muted); font-size: .9rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .78rem; color: var(--navy-300); margin-top: auto; padding-top: .4rem; }
.bc-meta i { margin-inline-end: .25rem; }
.bc-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.bc-tag { background: var(--bg-soft); color: var(--navy-600); padding: .2rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }

.blog-empty { text-align: center; padding: 4rem 2rem; color: var(--muted); }
.blog-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--navy-100); }
.blog-empty a { color: var(--orange-600); font-weight: 700; }

.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap; }
.page-btn { min-width: 42px; padding: .55rem .9rem; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; cursor: pointer; text-decoration: none; color: var(--text); font-family: var(--ff); font-size: .9rem; font-weight: 600; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; }
.page-btn:hover, .page-btn.active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.page-btn.disabled { opacity: .4; pointer-events: none; }

/* ============================================================
   BLOG POST  (blog-post.php)
   ============================================================ */
.article { max-width: 820px; margin: 0 auto; }
.article-cover { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 32px; aspect-ratio: 16/8; background: var(--grad-brand); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-head { margin-bottom: 26px; }
.article-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.2; margin-bottom: 14px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: .9rem; align-items: center; }
.article-meta i { margin-inline-end: .3rem; color: var(--navy-300); }
.article-body { color: var(--text); font-size: 1.05rem; line-height: 1.95; }
.article-body > * { margin-bottom: 1.1rem; }
.article-body h2 { font-size: 1.5rem; color: var(--ink); margin: 2rem 0 .8rem; }
.article-body h3 { font-size: 1.2rem; color: var(--ink); margin: 1.6rem 0 .6rem; }
.article-body a { color: var(--orange-600); text-decoration: underline; }
.article-body ul, .article-body ol { padding-inline-start: 1.4rem; }
.article-body li { margin-bottom: .5rem; }
.article-body img { border-radius: var(--radius); margin-block: 1.4rem; }
.article-body blockquote { border-inline-start: 4px solid var(--orange-500); background: var(--bg-soft); padding: 1rem 1.4rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.article-body code { font-family: Consolas, "Courier New", monospace; background: var(--bg-soft); border-radius: 6px; padding: .15rem .45rem; font-size: .9em; }
.article-body pre { font-family: Consolas, "Courier New", monospace; background: var(--navy-900); color: #e6e9f2; border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; overflow-x: auto; }
.article-body pre code { background: none; padding: 0; color: inherit; }

/* breadcrumb + browse-categories chips (blog post) */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .82rem; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--navy-600); }
.crumbs a:hover { color: var(--orange-600); }
.crumbs i { font-size: .65rem; color: var(--navy-100); }
.crumbs .current { color: var(--ink); }
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.article-tags .bc-tag { font-size: .82rem; }
.article-share { display: flex; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.article-share span { color: var(--muted); font-size: .9rem; }
.article-share a, .article-share button { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; color: var(--navy-600); transition: all .25s; cursor: pointer; }
.article-share a:hover, .article-share button:hover { background: var(--orange-500); color: #fff; border-color: transparent; transform: translateY(-3px); }
.article-share .share-wa:hover { background: #25D366; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
@media (max-width: 1024px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTENT PAGES  (page.php)
   ============================================================ */
.page-body { max-width: 820px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 40px 44px; color: var(--text); line-height: 1.95; }
.page-body h2 { font-size: 1.4rem; color: var(--ink); margin: 1.8rem 0 .7rem; }
.page-body h3 { font-size: 1.15rem; color: var(--ink); margin: 1.4rem 0 .5rem; }
.page-body p { margin-bottom: 1rem; }
.page-body ul, .page-body ol { padding-inline-start: 1.5rem; margin-bottom: 1rem; }
.page-body li { margin-bottom: .4rem; }
.page-body strong { color: var(--ink); }
.page-body a { color: var(--orange-600); text-decoration: underline; }
.last-updated { font-size: .82rem; color: var(--navy-300); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .page-body { padding: 26px 22px; } }