/* ===================================================================
   Laravel add-ons for the SHAYAN BOUSHEHRI design
   (pagination, empty states, single article, flash message)
   =================================================================== */

/* Pagination */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 40px auto 0; }
.pager__item { min-width: 42px; height: 42px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--head); font-size: 13px; letter-spacing: .12em; color: var(--muted); text-decoration: none;
  border: 1px solid var(--hair); border-radius: 50px; transition: .25s ease; }
a.pager__item:hover { color: #fff; border-color: var(--orange); box-shadow: 0 0 14px var(--orange-glow); }
.pager__item.is-on { color: #0a0807; background: linear-gradient(180deg, var(--orange-2), var(--orange-deep)); border-color: transparent; }
.pager__item.is-off { opacity: .35; pointer-events: none; }

/* Empty state */
.empty-note { text-align: center; color: var(--muted); padding: 50px 20px; border: 1px dashed var(--hair); border-radius: var(--radius); }

/* Tiles that link out (Instagram / external) */
.work__out { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; font-family: var(--head); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(10,8,7,.6); border: 1px solid var(--line);
  border-radius: 50px; padding: 6px 12px; text-decoration: none; }
.work__out:hover { border-color: var(--orange); color: var(--orange-2); }

/* Single article (blog) */
.post { max-width: 780px; margin: 0 auto; }
.post__img { width: 100%; border-radius: var(--radius); display: block; margin-bottom: 30px; border: 1px solid var(--hair); }
.post__meta { font-family: var(--head); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-2); margin-bottom: 18px; }
.post__body { color: #d9d2c8; font-size: 16px; line-height: 1.9; }
.post__body p { margin-bottom: 1.1em; }
.post__back { display: inline-block; margin-top: 34px; color: var(--muted); text-decoration: none; font-family: var(--head); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.post__back:hover { color: var(--orange-2); }

/* Flash message (server response) */
.flash { max-width: var(--maxw); margin: 20px auto 0; padding: 14px 20px; border-radius: 10px; font-size: 14px;
  border: 1px solid var(--line); background: rgba(224,123,41,.08); color: var(--ink); }
.flash--error { border-color: rgba(255,59,48,.4); background: rgba(255,59,48,.08); }

/* Video tiles without a poster image: show the video's first frame */
.work__vid.is-poster { opacity: 1; }