/* ============================================================
   hh_funeral.css  rev.7  (2026-10)
   rev.7: compact text-link style for ul.kindList.useCompact on SP
   rev.6: ranking badges for 4th-9th place (li.rank4 - li.rank9)
   rev.5: also used by the celebration index page (/c/congratulation):
          category intro boxes (section.indexTypeBox)
   rev.4: funeral index page (/c/funeral): menu cards, 3-column
          timing tables (table.funeralTbl), delivered-photo iframes
   Funeral category pages (funeral01-14)

   rev.3: SP layout is handled by /css/sp_congra.css (same as the
          celebration pages). This file only adds the parts that
          exist on funeral pages and are NOT covered there:
            - message example table (table.noteTbl)
            - timing table on funeral07 (table.hzTbl)
            - lead text box (div.mannerLeadBox)
            - lists inside manner text (funeral08)
            - bottom banner + occasion links (section.funeralBtm)
   PC: no change.  SP rules are scoped to .hhFn and 768px or less
   (same breakpoint as sp_congra.css).
   ============================================================ */

/* ---------- common (PC + SP) ---------- */
ul.hhFnItems img {
  max-width: 100% !important;
  height: auto !important;
}

/* ---------- rev.6: ranking badges 4th-9th (PC + SP) ----------
   li.rank already gets the badge size/position from contents_renew.css (PC)
   and sp_congra.css (SP). Only the image is added here.
   Same images as the shared ranking (inc_congra_ranking.html). */
.hhFn ul.withRankNum li.rank4 figure::before { background-image: url(/img_renew/common/rank4.png?v=20260827); }
.hhFn ul.withRankNum li.rank5 figure::before { background-image: url(/img_renew/common/rank5.png?v=20260827); }
.hhFn ul.withRankNum li.rank6 figure::before { background-image: url(/img_renew/common/rank6.png?v=20260827); }
.hhFn ul.withRankNum li.rank7 figure::before { background-image: url(/img_renew/common/rank7.png?v=20260827); }
.hhFn ul.withRankNum li.rank8 figure::before { background-image: url(/img_renew/common/rank8.png?v=20260827); }
.hhFn ul.withRankNum li.rank9 figure::before { background-image: url(/img_renew/common/rank9.png?v=20260827); }

/* ---------- SP only ---------- */
@media screen and (max-width: 768px) {

  /* lead text above the table of contents (funeral02 / 03 / 11) */
  .hhFn div.mannerLeadBox { margin-top: 18px; font-size: 13.5px; line-height: 1.95; }
  .hhFn div.mannerLeadBox p ~ p { margin-top: 1.2em; }
  .hhFn div.mannerLeadBox em { background: #ebe6ce; font-style: normal; }
  .hhFn div.mannerLeadBox a { color: #2d2d2d; border-bottom: 1px solid #2d2d2d; }

  /* paragraphs and links inside manner text */
  .hhFn div.guideBox div.noteBox p ~ p { margin-top: 1.2em; }
  .hhFn div.guideBox div.noteBox a { color: #2d2d2d; border-bottom: 1px solid #2d2d2d; }

  /* bullet lists inside manner text (flower names, altar items) */
  .hhFn div.guideBox div.noteBox ul { margin: 0.8em 0; padding: 0; list-style: none; }
  .hhFn div.guideBox div.noteBox ul li { position: relative; padding-left: 1em; line-height: 1.8; }
  .hhFn div.guideBox div.noteBox ul li::before { content: "\30FB"; position: absolute; left: 0; top: 0; }

  /* message examples: th on top, td below (no side-by-side on SP) */
  .hhFn table.noteTbl,
  .hhFn table.noteTbl tbody,
  .hhFn table.noteTbl tr,
  .hhFn table.noteTbl th,
  .hhFn table.noteTbl td { display: block; width: auto; box-sizing: border-box; }
  .hhFn table.noteTbl { margin-top: 12px; border-collapse: collapse; }
  .hhFn table.noteTbl tr { border: 1px solid #ebe6ce; }
  .hhFn table.noteTbl tr ~ tr { margin-top: 10px; }
  .hhFn table.noteTbl th {
    background: #f9f7f0; padding: 8px 12px;
    font-size: 13px; font-weight: 700; text-align: left; line-height: 1.5;
  }
  .hhFn table.noteTbl td { padding: 10px 12px; font-size: 13.5px; line-height: 1.85; }

  /* timing table (funeral07): keep columns, scroll sideways inside the table */
  .hhFn table.hzTbl {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-top: 12px; border-collapse: collapse; font-size: 12.5px; line-height: 1.7;
  }
  .hhFn table.hzTbl th,
  .hhFn table.hzTbl td { min-width: 8em; padding: 8px 10px; border: 1px solid #ebe6ce; vertical-align: top; text-align: left; }
  .hhFn table.hzTbl th { background: #f9f7f0; font-weight: 700; }
  .hhFn table.hzTbl ul { margin: 0; padding: 0; list-style: none; }

  /* bottom banner + occasion links (kindList itself is styled by sp_congra.css) */
  .hhFn section.congGuideSec.funeralBtm { margin-top: 40px; }
  .hhFn section.congGuideSec.funeralBtm > p img { width: 100%; height: auto; display: block; }
  .hhFn section.congGuideSec.funeralBtm div.guideBox { margin-top: 24px; }
  /* ---------- rev.4: funeral index page (/c/funeral) ---------- */

  /* occasion menu cards (12 cards, 2 columns) */
  .hhFn div.indexMenu { margin-top: 20px; }
  .hhFn div.indexMenu ul {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px; margin: 0; padding: 0; list-style: none;
  }
  .hhFn div.indexMenu li { width: auto; margin: 0; float: none; }
  .hhFn div.indexMenu li a { display: block; height: 100%; color: #2d2d2d; text-decoration: none; border: 1px solid #ebe6ce; background: #fff; }
  .hhFn div.indexMenu figure { margin: 0; }
  .hhFn div.indexMenu figure img { width: 100%; height: auto; display: block; }
  .hhFn div.indexMenu li div { padding: 8px 8px 10px; position: static; }
  .hhFn div.indexMenu h3 { margin: 0 0 4px; padding: 0; font-size: 14px; font-weight: 700; line-height: 1.4; background: none; border: 0; }
  .hhFn div.indexMenu p { margin: 0; font-size: 11.5px; line-height: 1.6; color: #555; }

  /* 3-column timing tables: keep the table, scroll sideways */
  .hhFn table.noteTbl.funeralTbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 16px; border: 0; }
  .hhFn table.noteTbl.funeralTbl caption { display: block; text-align: left; font-size: 14px; font-weight: 700; padding: 0 0 8px; }
  .hhFn table.noteTbl.funeralTbl thead { display: table-header-group; }
  .hhFn table.noteTbl.funeralTbl tbody { display: table-row-group; }
  .hhFn table.noteTbl.funeralTbl tr { display: table-row; border: 0; margin: 0; }
  .hhFn table.noteTbl.funeralTbl th,
  .hhFn table.noteTbl.funeralTbl td {
    display: table-cell; min-width: 7em; padding: 8px 10px;
    border: 1px solid #ebe6ce; vertical-align: top; text-align: left;
    font-size: 12.5px; line-height: 1.7;
  }
  .hhFn table.noteTbl.funeralTbl td:last-child { min-width: 16em; }
  .hhFn table.noteTbl.funeralTbl thead th,
  .hhFn table.noteTbl.funeralTbl tbody th { background: #f9f7f0; font-weight: 700; }

  /* delivered-photo iframes placed directly on the page */
  .hhFn section.cmsResentSec iframe { width: 100%; max-width: 100%; border: 0; }
  /* ---------- rev.5: celebration index page (/c/congratulation) ---------- */
  .hhFn section.indexTypeBox { box-sizing: border-box; padding: 0 15px; margin-top: 40px; }
  .hhFn section.indexTypeBox > div { display: block; }
  .hhFn section.indexTypeBox figure { margin: 0 0 12px; }
  .hhFn section.indexTypeBox figure img { width: 100%; height: auto; display: block; }
  .hhFn section.indexTypeBox h2 {
    margin: 0 0 8px; padding: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.4;
    border-bottom: 1px solid #ebe6ce; background: none;
  }
  .hhFn section.indexTypeBox p { margin: 0; font-size: 13.5px; line-height: 1.9; }
  .hhFn div.introSec div.textLink, .hhFn section.introSec div.textLink { margin-top: 20px; }
  /* ---------- rev.7: compact link list (ul.kindList.useCompact) ----------
     sp_congra.css turns every ul.kindList into 46px boxed buttons.
     This one list (19 links under the menu cards on /c/congratulation)
     is shown as small 2-column text links instead, to keep it short. */
  .hhFn ul.kindList.useCompact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 14px !important;
    margin-top: 6px !important;
    border-top: 1px solid #ebe6ce;
  }
  .hhFn ul.kindList.useCompact li { margin: 0 !important; border-bottom: 1px solid #ebe6ce; }
  .hhFn ul.kindList.useCompact li a {
    display: block !important;
    height: auto !important;
    padding: 8px 4px 8px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: #2d2d2d !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    position: relative;
  }
  .hhFn ul.kindList.useCompact li a::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 2px !important; top: 50% !important; right: auto !important; bottom: auto !important;
    width: 5px !important; height: 5px !important;
    margin-top: -3px !important;
    border-top: 1px solid #91854a !important;
    border-right: 1px solid #91854a !important;
    background: none !important;
    transform: rotate(45deg) !important;
  }
}