/* ------------------------------------------------------------
 * FOTOFILE editorial layer: blog listings, articles, static pages.
 *
 * Scoped to .fotofile-v2-blog and .fotofile-v2-page, which only the editorial
 * templates emit, so nothing here can reach the storefront or WooCommerce.
 * Loaded only on those views.
 *
 * Layout summary
 *   listing - full width: hero band, category filter row, then a page-one
 *             mosaic (one lead card beside two stacked cards) over a 3-up grid.
 *   article - share rail | reading column | related + product sidebar.
 * ------------------------------------------------------------ */

/* ---- Icons ---- */

.fotofile-v2-blog-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fotofile-v2-blog-icon--solid {
  fill: currentColor;
  stroke: none;
}

/* ---- Breadcrumb ---- */

.fotofile-v2-blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--fotofile-v2-muted);
  font-size: 0.8rem;
}

.fotofile-v2-blog-breadcrumb a { text-decoration: none; }
.fotofile-v2-blog-breadcrumb a:hover { color: var(--fotofile-v2-accent); }

.fotofile-v2-blog-breadcrumb__sep { color: var(--fotofile-v2-ink-soft); }

.fotofile-v2-blog-breadcrumb__current {
  overflow: hidden;
  max-width: 46ch;
  color: var(--fotofile-v2-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Listing hero ---- */

.fotofile-v2-blog-hero {
  position: relative;
  display: grid;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-lg);
  background: linear-gradient(90deg, #fff 0%, #f4f4f4 100%);
}

.fotofile-v2-blog-hero__copy {
  z-index: 1;
  padding: clamp(20px, 3vw, 40px);
}

.fotofile-v2-blog-hero__title {
  margin: 0;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
}

.fotofile-v2-blog-hero__desc {
  margin: 10px 0 0;
  max-width: 46ch;
  color: var(--fotofile-v2-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.fotofile-v2-blog-hero__media { display: none; }

.fotofile-v2-blog-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 600px) {
  .fotofile-v2-blog-hero--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    align-items: stretch;
  }

  .fotofile-v2-blog-hero--media .fotofile-v2-blog-hero__media {
    display: block;
    min-height: 210px;
    /* Soft left edge so the photograph reads as part of the band rather than a
       pasted-in rectangle. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  }
}

/* ---- Category filter row ---- */

.fotofile-v2-blog-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 18px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.fotofile-v2-blog-filters::-webkit-scrollbar { display: none; }

.fotofile-v2-blog-filter {
  flex: 0 0 auto;
  padding: 8px 18px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: 999px;
  background: var(--fotofile-v2-surface);
  color: var(--fotofile-v2-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.fotofile-v2-blog-filter:hover {
  border-color: var(--fotofile-v2-accent);
  color: var(--fotofile-v2-accent);
}

.fotofile-v2-blog-filter.is-current {
  border-color: var(--fotofile-v2-accent);
  background: var(--fotofile-v2-accent);
  color: #fff;
}

/* ---- Plain listing header (search results) ---- */

.fotofile-v2-blog-head { margin-bottom: 18px; }

.fotofile-v2-blog-head__title {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 800;
  line-height: 1.3;
}

.fotofile-v2-blog-head__desc {
  margin: 6px 0 0;
  color: var(--fotofile-v2-muted);
  font-size: 0.88rem;
}

/* ---- Listing mosaic and grid ---- */

.fotofile-v2-blog-mosaic {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.fotofile-v2-blog-mosaic__side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.fotofile-v2-blog-mosaic__lead { min-width: 0; }
.fotofile-v2-blog-mosaic__lead .fotofile-v2-blog-card { height: 100%; }

/* The lead card is as tall as the two cards beside it, and that spare height
   used to collect as blank space under the excerpt. It goes to the photograph
   instead: the image absorbs the slack, the text block keeps its natural
   height, and "อ่านต่อ" sits directly under the excerpt. */
@media (min-width: 783px) {
  .fotofile-v2-blog-mosaic__lead .fotofile-v2-blog-card__media {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 260px;
  }

  .fotofile-v2-blog-mosaic__lead .fotofile-v2-blog-card__body { flex: 0 0 auto; }
  .fotofile-v2-blog-mosaic__lead .fotofile-v2-blog-card__more { margin-top: 0; }
}

@media (min-width: 783px) {
  /* The lead card is deliberately much wider than the stack beside it: at a
     narrower ratio the two stacked images grow tall enough to leave dead space
     inside the lead card. */
  .fotofile-v2-blog-mosaic { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .fotofile-v2-blog-mosaic__side { grid-template-rows: 1fr 1fr; }
}

.fotofile-v2-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .fotofile-v2-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .fotofile-v2-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Card ---- */

.fotofile-v2-blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius);
  background: var(--fotofile-v2-surface);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.fotofile-v2-blog-card:hover,
.fotofile-v2-blog-card:focus-within {
  box-shadow: var(--fotofile-v2-shadow);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .fotofile-v2-blog-card { transition: none; }
  .fotofile-v2-blog-card:hover,
  .fotofile-v2-blog-card:focus-within { transform: none; }
}

.fotofile-v2-blog-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--fotofile-v2-tile);
}

.fotofile-v2-blog-card--feature .fotofile-v2-blog-card__media { aspect-ratio: 16 / 10; }

.fotofile-v2-blog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fotofile-v2-blog-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f2f2f2 0%, #e9e9e9 100%);
}

/* ---- Category badge ----
 * Orange by default. The Learning Center badge is dark, as in the approved
 * design. The hook is `--<term slug>`: to give another section its own colour,
 * add a rule for that category's real slug - nothing is pre-declared for
 * categories that may not exist. */

.fotofile-v2-blog-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--fotofile-v2-accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.fotofile-v2-blog-badge--learning-center {
  background: rgba(24, 24, 24, 0.86);
}

.fotofile-v2-blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.fotofile-v2-blog-card--feature .fotofile-v2-blog-card__body { padding: 18px 20px 20px; }
.fotofile-v2-blog-card--compact .fotofile-v2-blog-card__body { padding: 12px 14px 14px; }

.fotofile-v2-blog-card__meta,
.fotofile-v2-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--fotofile-v2-muted);
  font-size: 0.78rem;
}

.fotofile-v2-blog-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fotofile-v2-blog-card__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

.fotofile-v2-blog-card--feature .fotofile-v2-blog-card__title {
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.34rem);
  line-height: 1.35;
}

.fotofile-v2-blog-card--compact .fotofile-v2-blog-card__title { font-size: 0.94rem; }

.fotofile-v2-blog-card__title a { text-decoration: none; }
.fotofile-v2-blog-card__title a:hover { color: var(--fotofile-v2-accent); }

/* Titles and excerpts are clamped so every card in a row ends at the same
   place - a Thai headline can otherwise run to four lines and knock the grid
   out of alignment. */
.fotofile-v2-blog-card__title a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.fotofile-v2-blog-card--feature .fotofile-v2-blog-card__title a { -webkit-line-clamp: 3; }

.fotofile-v2-blog-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--fotofile-v2-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.fotofile-v2-blog-card--feature .fotofile-v2-blog-card__excerpt { -webkit-line-clamp: 3; }

.fotofile-v2-blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--fotofile-v2-accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.fotofile-v2-blog-card__more .fotofile-v2-blog-icon { width: 15px; height: 15px; }

.fotofile-v2-blog-empty {
  padding: 32px 0;
  color: var(--fotofile-v2-muted);
  text-align: center;
}

/* ---- Pagination ---- */

.fotofile-v2-blog .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.fotofile-v2-blog .nav-links .page-numbers {
  display: inline-grid;
  min-width: 40px;
  height: 40px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-sm);
  background: var(--fotofile-v2-surface);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.fotofile-v2-blog .nav-links a.page-numbers:hover {
  border-color: var(--fotofile-v2-accent);
  color: var(--fotofile-v2-accent);
}

.fotofile-v2-blog .nav-links .page-numbers.current {
  border-color: var(--fotofile-v2-accent);
  background: var(--fotofile-v2-accent);
  color: #fff;
}

.fotofile-v2-blog .nav-links .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

.fotofile-v2-blog-pagination__arrow {
  font-size: 1.2rem;
  line-height: 1;
}

/* ------------------------------------------------------------
 * Article layout: share rail | reading column | sidebar.
 * ------------------------------------------------------------ */

.fotofile-v2-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "rail"
    "aside";
  align-items: start;
  gap: 18px;
}

.fotofile-v2-article-layout__main { grid-area: main; min-width: 0; }
.fotofile-v2-article-layout__rail { grid-area: rail; min-width: 0; }
.fotofile-v2-article-layout__aside { grid-area: aside; min-width: 0; }

@media (min-width: 783px) {
  .fotofile-v2-article-layout {
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-areas:
      "rail main"
      ".    aside";
    gap: 24px;
  }
}

@media (min-width: 1080px) {
  .fotofile-v2-article-layout {
    grid-template-columns: 60px minmax(0, 1fr) 300px;
    grid-template-areas:
      "rail main aside";
  }

  .fotofile-v2-article-layout__rail {
    position: sticky;
    top: 84px;
  }
}

/* ---- Share rail ---- */

.fotofile-v2-share {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius);
  background: var(--fotofile-v2-surface);
}

.fotofile-v2-share__label {
  color: var(--fotofile-v2-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.fotofile-v2-share__actions {
  position: relative;
  display: flex;
  gap: 8px;
}

/* "คัดลอกลิงก์แล้ว" confirmation. Absolute so it cannot resize the rail. */
.fotofile-v2-share__note {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  z-index: 3;
  padding: 5px 10px;
  border-radius: var(--fotofile-v2-radius-sm);
  background: rgba(24, 24, 24, 0.9);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.fotofile-v2-share__note.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fotofile-v2-share__note { transition: none; }
}

.fotofile-v2-share__btn,
.fotofile-v2-share__follow {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-sm);
  background: var(--fotofile-v2-surface);
  color: var(--fotofile-v2-ink);
  cursor: pointer;
  text-decoration: none;
}

.fotofile-v2-share__btn {
  width: 38px;
  height: 38px;
}

.fotofile-v2-share__btn .fotofile-v2-blog-icon { width: 18px; height: 18px; }

.fotofile-v2-share__btn:hover,
.fotofile-v2-share__follow:hover {
  border-color: var(--fotofile-v2-accent);
  color: var(--fotofile-v2-accent);
}

.fotofile-v2-share__btn.is-copied {
  border-color: var(--fotofile-v2-accent);
  background: rgba(238, 77, 45, 0.1);
  color: var(--fotofile-v2-accent);
}

/* The YouTube follow link. Not a share target - it sits apart from the share
   group and says so. */
.fotofile-v2-share__follow {
  grid-auto-flow: column;
  gap: 6px;
  margin-left: auto;
  padding: 9px 14px;
  font-size: 0.78rem;
  font-weight: 700;
}

.fotofile-v2-share__follow .fotofile-v2-blog-icon { width: 18px; height: 18px; }

@media (min-width: 783px) {
  /* In the rail the whole control stacks and the label turns on its side, as in
     the approved design. */
  .fotofile-v2-share {
    flex-direction: column;
    gap: 12px;
    padding: 14px 8px;
  }

  .fotofile-v2-share__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.04em;
  }

  .fotofile-v2-share__actions { flex-direction: column; }

  .fotofile-v2-share__btn { width: 40px; height: 40px; }

  .fotofile-v2-share__follow {
    grid-auto-flow: row;
    gap: 4px;
    margin-left: 0;
    padding: 9px 4px;
    width: 40px;
    border: 0;
    border-top: 1px solid var(--fotofile-v2-line);
    border-radius: 0;
    color: var(--fotofile-v2-muted);
    font-size: 0.66rem;
    text-align: center;
  }
}

/* ---- Article ---- */

.fotofile-v2-article,
.fotofile-v2-page__article {
  padding: clamp(18px, 2.4vw, 34px);
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius);
  background: var(--fotofile-v2-surface);
}

.fotofile-v2-article__head { margin-bottom: 18px; }

.fotofile-v2-article__kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--fotofile-v2-accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.fotofile-v2-article__title,
.fotofile-v2-page__title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.15rem);
  font-weight: 800;
  line-height: 1.28;
}

.fotofile-v2-article__cover {
  margin: 0 0 20px;
  overflow: hidden;
  border-radius: var(--fotofile-v2-radius);
  background: var(--fotofile-v2-tile);
}

.fotofile-v2-article__cover-image {
  /* Capped, not cropped. These covers carry titles inside the artwork, so
     object-fit would cut the words off; limiting height keeps the whole image
     and stops it from taking the entire first screen. */
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  margin-inline: auto;
}

.fotofile-v2-article__toc { margin-bottom: 18px; }

/* The desktop design gives this space to the share rail; the contents list is a
   phone affordance for long Thai articles. */
@media (min-width: 783px) {
  .fotofile-v2-article__toc { display: none; }
}

/* Reading column. Long-form text is capped for legibility; blocks that ask to
   be wide or full are allowed to escape it. */
.fotofile-v2-article__content,
.fotofile-v2-page__content {
  max-width: 72ch;
  font-size: 1.02rem;
  line-height: 1.75;
}

.fotofile-v2-article__content > *,
.fotofile-v2-page__content > * {
  margin-block: 0 1.1em;
}

.fotofile-v2-article__content h2,
.fotofile-v2-page__content h2 {
  margin-top: 1.8em;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.35;
}

.fotofile-v2-article__content h3,
.fotofile-v2-page__content h3 {
  margin-top: 1.5em;
  font-size: 1.1rem;
  font-weight: 700;
}

.fotofile-v2-article__content a,
.fotofile-v2-page__content a {
  color: var(--fotofile-v2-accent);
  text-underline-offset: 2px;
}

.fotofile-v2-article__content img,
.fotofile-v2-page__content img {
  border-radius: var(--fotofile-v2-radius-sm);
}

.fotofile-v2-article__content figcaption,
.fotofile-v2-page__content figcaption {
  margin-top: 8px;
  color: var(--fotofile-v2-muted);
  font-size: 0.82rem;
  text-align: center;
}

.fotofile-v2-article__content blockquote,
.fotofile-v2-page__content blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--fotofile-v2-accent);
  color: var(--fotofile-v2-ink-soft);
}

/* Editor utility: an accented summary box, as used for the key-point callouts
   in the approved article design. Apply the class to a group or paragraph. */
.fotofile-v2-article__content .fotofile-v2-callout,
.fotofile-v2-page__content .fotofile-v2-callout {
  padding: 14px 16px;
  border: 1px solid rgba(238, 77, 45, 0.3);
  border-left-width: 4px;
  border-radius: var(--fotofile-v2-radius-sm);
  background: rgba(238, 77, 45, 0.05);
  font-size: 0.94rem;
}

.fotofile-v2-article__content ul,
.fotofile-v2-article__content ol,
.fotofile-v2-page__content ul,
.fotofile-v2-page__content ol {
  padding-left: 1.3em;
}

.fotofile-v2-article__content figure,
.fotofile-v2-page__content figure { margin-inline: 0; }

.fotofile-v2-article__content table,
.fotofile-v2-page__content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.fotofile-v2-article__content th,
.fotofile-v2-article__content td,
.fotofile-v2-page__content th,
.fotofile-v2-page__content td {
  padding: 9px 12px;
  border: 1px solid var(--fotofile-v2-line);
  text-align: left;
}

.fotofile-v2-article__content thead th,
.fotofile-v2-page__content thead th {
  background: var(--fotofile-v2-tile);
  font-weight: 700;
}

/* Wide / full-width blocks break out of the reading column. */
.fotofile-v2-article__content .alignwide,
.fotofile-v2-page__content .alignwide {
  width: min(100%, 1000px);
  max-width: none;
}

.fotofile-v2-article__content .alignfull,
.fotofile-v2-page__content .alignfull {
  width: 100%;
  max-width: none;
}

.fotofile-v2-article__content .alignleft { float: left; margin: 0 1.2em 1em 0; }
.fotofile-v2-article__content .alignright { float: right; margin: 0 0 1em 1.2em; }
.fotofile-v2-article__content .aligncenter { margin-inline: auto; }

/* ---- Author card ---- */

.fotofile-v2-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius);
  background: #fafafa;
}

.fotofile-v2-author__avatar {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fotofile-v2-accent), #ff7337);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
}

.fotofile-v2-author__body {
  flex: 1 1 220px;
  min-width: 0;
}

.fotofile-v2-author__name {
  font-size: 0.98rem;
  font-weight: 800;
  text-decoration: none;
}

.fotofile-v2-author__name:hover { color: var(--fotofile-v2-accent); }

.fotofile-v2-author__bio {
  margin: 4px 0 0;
  color: var(--fotofile-v2-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.fotofile-v2-author__links {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.fotofile-v2-author__links a {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-sm);
  background: var(--fotofile-v2-surface);
  color: var(--fotofile-v2-muted);
}

.fotofile-v2-author__links a:hover {
  border-color: var(--fotofile-v2-accent);
  color: var(--fotofile-v2-accent);
}

/* ---- Sidebar panels ---- */

.fotofile-v2-blog-panel {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius);
  background: var(--fotofile-v2-surface);
}

.fotofile-v2-blog-panel__title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
}

.fotofile-v2-blog-panel__cta {
  display: block;
  margin-top: 14px;
  padding: 9px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.fotofile-v2-blog-panel__cta:hover {
  border-color: var(--fotofile-v2-accent);
  color: var(--fotofile-v2-accent);
}

/* Related-article rows */

.fotofile-v2-blog-mini {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-blog-mini__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  text-decoration: none;
}

.fotofile-v2-blog-mini__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--fotofile-v2-radius-sm);
  background: var(--fotofile-v2-tile);
}

.fotofile-v2-blog-mini__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fotofile-v2-blog-mini__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

/* Inside the row the badge is part of the flow, not an overlay. */
.fotofile-v2-blog-mini__body .fotofile-v2-blog-badge {
  position: static;
  padding: 2px 7px;
  font-size: 0.6rem;
}

.fotofile-v2-blog-mini__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.fotofile-v2-blog-mini__item:hover .fotofile-v2-blog-mini__title { color: var(--fotofile-v2-accent); }

.fotofile-v2-blog-mini__date {
  color: var(--fotofile-v2-muted);
  font-size: 0.72rem;
}

/* Recommended products */

.fotofile-v2-blog-picks {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fotofile-v2-blog-pick {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.fotofile-v2-blog-pick__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-sm);
  background: var(--fotofile-v2-surface);
}

.fotofile-v2-blog-pick__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fotofile-v2-blog-pick__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fotofile-v2-blog-pick__brand {
  color: var(--fotofile-v2-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fotofile-v2-blog-pick__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.fotofile-v2-blog-pick__title:hover { color: var(--fotofile-v2-accent); }

.fotofile-v2-blog-pick__price {
  color: var(--fotofile-v2-price);
  font-size: 0.88rem;
  font-weight: 800;
}

.fotofile-v2-blog-pick__price del {
  color: var(--fotofile-v2-ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
}

.fotofile-v2-blog-pick__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.fotofile-v2-blog-pick__view {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--fotofile-v2-line);
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.fotofile-v2-blog-pick__view:hover {
  border-color: var(--fotofile-v2-accent);
  color: var(--fotofile-v2-accent);
}

.fotofile-v2-blog-pick__cart {
  display: grid;
  width: 30px;
  height: 28px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 6px;
  background: var(--fotofile-v2-accent);
  color: #fff;
}

.fotofile-v2-blog-pick__cart .fotofile-v2-blog-icon { width: 16px; height: 16px; }
.fotofile-v2-blog-pick__cart:hover { background: #d8431f; }

/* ---- Static page ---- */

.fotofile-v2-page__head { margin-bottom: 18px; }

/* ---- Table of contents ---- */

.fotofile-v2-toc {
  border: 1px solid var(--fotofile-v2-line);
  border-radius: var(--fotofile-v2-radius-sm);
  background: #fbfbfb;
}

.fotofile-v2-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  list-style: none;
}

.fotofile-v2-toc__summary::-webkit-details-marker { display: none; }

.fotofile-v2-toc__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}

.fotofile-v2-toc[open] .fotofile-v2-toc__summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.fotofile-v2-toc__count {
  margin-left: auto;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fotofile-v2-tile);
  color: var(--fotofile-v2-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.fotofile-v2-toc__list {
  margin: 0;
  padding: 0 14px 12px 30px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.fotofile-v2-toc__list li { margin-bottom: 7px; }

.fotofile-v2-toc__list a {
  color: var(--fotofile-v2-muted);
  text-decoration: none;
}

.fotofile-v2-toc__list a:hover { color: var(--fotofile-v2-accent); }

.fotofile-v2-toc__list a.is-current {
  color: var(--fotofile-v2-accent);
  font-weight: 700;
}

/* ---- Reading progress ---- */

.fotofile-v2-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.fotofile-v2-progress__bar {
  height: 100%;
  width: 0;
  background: var(--fotofile-v2-accent);
  transition: width 0.08s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fotofile-v2-progress__bar { transition: none; }
}

/* ---- Thai reading typography ---------------------------------
 * Thai stacks vowels and tone marks above and below the baseline, so the line
 * height that reads comfortably in Latin text crowds it. Slightly larger type
 * and looser lines on small screens, where most of this is read.
 * ------------------------------------------------------------ */

@media (max-width: 767px) {
  .fotofile-v2-article__content,
  .fotofile-v2-page__content {
    font-size: 1.06rem;
    line-height: 1.85;
  }

  .fotofile-v2-article__content li,
  .fotofile-v2-page__content li { margin-bottom: 0.5em; }

  .fotofile-v2-article,
  .fotofile-v2-page__article {
    padding-inline: 14px;
    border-inline: 0;
    border-radius: 0;
  }

  /* Article images run to the edge on phones. */
  .fotofile-v2-article__content > figure,
  .fotofile-v2-article__content > .wp-block-image {
    margin-inline: -14px;
  }

  .fotofile-v2-article__content > figure img,
  .fotofile-v2-article__content > .wp-block-image img { border-radius: 0; }

  /* Clear the theme's fixed bottom navigation. */
  .fotofile-v2-blog { padding-bottom: calc(var(--fotofile-v2-bottom-nav, 62px) + 16px); }
}

/* Anchor targets must not hide under the sticky header. */
.fotofile-v2-article__content h2 { scroll-margin-top: 84px; }

/* Phones read the cover at a glance, not as a hero. */
@media (max-width: 767px) {
  .fotofile-v2-article__cover-image { max-height: 240px; }
  .fotofile-v2-article__cover { margin-bottom: 16px; }
}